Styleguide

Report Bug · Request Feature

Summary

The style guide is intended for websites within Helsingborgs stad and others who use our platform. The guide provides examples, markup and themes for our standardized components. The Helsingborg Styleguide is a flexible and minimalistic component-based framework built in the BEM standard & designed around the Atomic Design principle.

Requirements

• NodeJS >= 16
• PHP >= 7.4
• Composer

Installation

1. Clone the repo:

git clone [email protected]:helsingborg-stad/styleguide.git

2. Run the build script in the cloned project:

cd styleguide && php build.php

Development

1. Start by running the steps under Installation.
2. Run webpack in watch-mode:

npm run watch

Testing

Jest is used as testing framework for JavaScript in the StyleGuide.

Test files should be added adjacent to the file that is the subject fo testing. Naming convention for test files is to use the same name as the file that is subject for testing and be appended with ".test.js" or "test.ts". The ".ts" file ending enables some IDE's, like VS Code, to add intellisense for Jest.

Example file accompanied by test file

source/js
├── gallery.js
├── gallery.test.ts

Test scripts

• Run tests:

  npm test

• Runs tests in file watch mode:

  npm run test:dev

VS Code Devcontainer & Codespaces

Configuration for Codespaces is available and to get it up and running do the following after opening a Codespace:

1. Run task Setup.
2. Run task Serve.

License

Distributed under the MIT License.

Acknowledgements

• othneildrew Best README Template