README

Styleguide

Summary

The style guide is intended for websites within Helsingborgs stad / Municipio Websites 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 >= 8
Composer

Installation

Clone the repo:

git clone git@github.com:helsingborg-stad/styleguide.git

Run the build script in the cloned project:

cd styleguide && php build.php

Development

Start by running the steps under Installation.
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:

Run task Setup.
Run task Serve.

License

Distributed under the MIT License.

Acknowledgements

othneildrew Best README Template

helsingborg-stad / styleguide

Maintainers

Package info

Statistics

Security