skuld.styles v0.1.2
Skuld Styles
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.
TODO
- including link to jest/backstop and other relevant tools (SASS, Babel)
Browser support
This project supports the last 2 versions of modern browsers (Chrome, Firefox, Safari, IE10+, Edge).
Install
Install with npm install
.
Developing
Run npm run start
to build and start dev server. Watching can be started with npm run watch
.
Styles
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.
Javascript
The js uses babel under the hood to transpile modern style javascript to something all browsers understand.
Updating package
Run npm shrinkwrap
to lock dependencies.
Change icon font
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.
Styleguide
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.
Add a components
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...>
Test
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.
Build for production
Run npm run build
to build the solution for production.