Name: styleguide-starterkit
Owner: Liip
Description: A starterkit to create styleguides with Fractal and Webpack.
Created: 2017-10-18 08:15:50.0
Updated: 2018-02-21 22:12:08.0
Pushed: 2018-03-12 12:24:36.0
Size: 120
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A starterkit to create web styleguides with Fractal and Webpack.
Inside the directory of your choice, install a copy of the starterkit with:
-L https://github.com/liip/styleguide-starterkit/archive/master.tar.gz | tar zx --strip 1
Then install the npm dependencies with:
install
To start the development server, run:
start
You can now access your styleguide at localhost:3000.
You?re all set, start to:
.nunj
(Nunjucks) files inside the components
directoryassets/scss/common.scss
assets/scripts/common.js
*.svg
icons in the assets/icons
directory.md
(Markdown) files inside the docs
directory.You can build a static version of the styleguide to deploy it wherever you like by running:
run build
The generated files go to the dist
directory.
The starterkit comes with a preconfigured release management tool. It will automatically update the CHANGELOG.md
file at the root of the project based on the commit messages as long as they follow the Angular commit guidelines. It will also bump the version number in the package.json
, run the build command above, commit, tag and push the changes. This process is interactive and you?ll be able to skip steps manually if you like.
To release a new version run:
run release [patch|minor|major|version_number]
By default the version bump is automatically determined based on the commits messages.
Read more in the release-it documentation.
To deploy a build of the styleguide, simply replace the blank command in the package.json
, under scripts -> deploy
. This will be automatically invoked at the end of the release process described above.
An example of a simple deploy command using rsync
:
loy": "rsync -avzP --delete --exclude='.*' dist/ user@server.com:/var/www/html/my-styleguide"
You can also run it manually at any time with:
run deploy
The browsers support is defined in the package.json
, in the browserslist
entry. It?s used both by Autoprefixer for the CSS and by babel-preset-env for the JavaScript.
Check browserslist?s documentation to change the browser support.
Icons placed inside assets/icons
are combined into a sprite called icons.svg
when referenced. To load them, either reference them in your JavaScript:
rt 'icons/foo.svg';
Or in your stylesheet:
ground-image: url('../icons/foo.svg');
Webpack will automatically rewrite the links to the sprite with the correct identifier. See svg-sprite-loader documentation for more information.
You can then easily use an icon in a template with the icon snippet:
ender '@icon', { id: 'foo', class: 'bar' } %}
Warning: This method of including remote SVG file is not supported by Internet Explorer 11 and below. You may want to polyfill it with svgxuse.