Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
119 lines (92 loc) · 3.89 KB

CONTRIBUTING.md

File metadata and controls

119 lines (92 loc) · 3.89 KB
Raw

Contributing to devtemDesign

Thanks for your interest in contributing!
devtemDesign is a lightweight, zero-dependency declarative page engine. We welcome improvements to templates, sections, accessibility, documentation, and the FSCSS source.

Ways to contribute

  • Report bugs or request features via Issues
  • Improve documentation or examples
  • Add or refine templates
  • Fix accessibility / responsive issues
  • Improve the FSCSS modules or the compile workflow
  • Submit pull requests

Development setup

  1. Fork the repository and clone your fork:

    git clone https://github.com/YOUR_USERNAME/devtemDesign.git
cd devtemDesign

  2. Install dependencies:

    npm install

  3. Work on styles in the fscss/ directory. The compiled output lives in style.css.

  4. Compile FSCSS → CSS:

    npm run build:css
# or
npx fscss fscss/main.fscss style.css

  5. Test changes by opening a simple HTML page that loads style.css + script.js and calls devtemDesign(...).

Project structure

devtemDesign/
├── fscss/                  # Source styles (FSCSS modules)
│   ├── main.fscss          # Entry point – imports all partials
│   ├── _tokens.fscss
│   ├── _base.fscss
│   ├── _effects.fscss
│   ├── _nav.fscss
│   ├── _buttons.fscss
│   ├── _hero.fscss
│   ├── _sections.fscss
│   ├── _pricing.fscss
│   ├── _faq-cta.fscss
│   ├── _footer.fscss
│   ├── _motion.fscss
│   └── _responsive.fscss
├── style.css               # Compiled CSS (generated – do not edit by hand)
├── script.js               # Engine
├── .github/workflows/      # CI that compiles FSCSS on push
└── package.json

Important: Edit the files under fscss/. Never hand-edit style.css — it is overwritten by the compiler and by GitHub Actions.

Coding guidelines

JavaScript (script.js)

  • Keep the library zero-dependency.
  • Prefer plain, readable vanilla JS.
  • Maintain the public API: devtemDesign(containerId, config) returns { setTemplate, destroy }.
  • Respect prefers-reduced-motion and fine-pointer media queries.
  • Keep accessibility in mind (ARIA, focus management, skip link, etc.).

Styles (FSCSS)

  • Prefer the existing design tokens (--accent, --glass-bg, etc.).
  • Use FSCSS property shorthands where they improve readability (px, py, rounded, bg, fs, fw, pos, size, etc.).
  • Keep selectors and cascade compatible with the current HTML structure generated by the engine.
  • Test both dark and light templates (especially paper).

Templates

When adding a new template:

  1. Add an entry to the templates object in script.js.
  2. Provide a complete set of the core tokens (--accent, --accent2, --accent3, --text, --muted, --bg-deep, glass values, etc.).
  3. Mark light themes with the second argument to mk(..., true).
  4. Update the README template table.

Pull request process

  1. Create a feature branch:

    git checkout -b feature/your-change

  2. Make your changes and ensure CSS compiles cleanly:

    npm run build:css

  3. Commit with a clear message (Conventional Commits style is appreciated):

    feat: add testimonials section
fix: drawer focus trap on Escape
docs: clarify theme token overrides
style: improve pricing card hover

  4. Push and open a Pull Request against main.

  5. Fill in the PR description: what changed, why, and how to test it.

CI will automatically recompile style.css when files under fscss/ change.

Code of Conduct

Be respectful and constructive. Harassment or discriminatory behavior will not be tolerated. See Contributor Covenant for guidance.

Questions?

Open an issue or start a discussion. We’re happy to help.