The Skuld Styles repo holdes the styles and javascript for Skuld web solutions, and the documentation for the styleguide. This package is published as a NPM Package.
- including link to jest/backstop and other relevant tools (SASS, Babel)
This project supports the last 2 versions of modern browsers (Chrome, Firefox, Safari, IE10+, Edge).
Install with npm install.
Run npm run start to build and start dev server. Watching can be started with npm run watch.
The SCSS files are organized after the Atomic Design pattern. Please make sure you understand the principles of Atomic design before contributing to this repo.
The js uses babel under the hood to transpile modern style javascript to something all browsers understand.
Run npm shrinkwrap to lock dependencies.
The icon font is generated by the free online tool Icomoon. Import the selection.json file in ./src/scss/fonts folder to get started. SVG icons are found in ./src/scss/icons.
The styleguide documents the most important and reusable components in Skuld's interface library. Each component has it's own folder under src/markup, with a markdown file (.md) and HTML file. The html file is used both for preview and to generate code.
To add a component to the styleguide, run npm run add <name-of-component>. Ie npm run add collapse. Alternatively add folder to markup, and a .html and .md file with the same name.
Pro tip you can create multiple components at the same time with npm run add <name-of-component1> <name-of-component2> <name-of-component...>
Run all tests with npm run test.
To run only unit/js tests, run npm run test:unit.
To run visual test, run npm run test:visual.
NB! You need a server running for visual tests: npm run start or gulp connect for just server.
Run npm run build to build the solution for production.