ViUR Ignite is a sizzling PostCSS boilerplate
Our goal is to create a boilerplate that is sturdy and scalable yet lightweight and adaptable to our different customer projects. Our approach to CSS is influenced by many modern CSS principles: object oriented, functional and structured. It uses the power of PostCSS.
For a detailed introduction and examples have a look at ignite.viur.dev.
- Ignite is a development toolkit for sturdy HTML and CSS
- It is a lightweight collection of helpful CSS
- It is responsive and adaptable
- It is built with PostCSS
- It is a solid foundation for Shoelace and VUEJS
- basic.css – styling of all application basics (body, fonts, headlines, lists etc.).
- color.css – is a collection of color tables.
- config.css – stores all default variables and constants.
- mediaqueries.css – is a really simple solution for media queries.
- reset.css – resets all browsers to the same base state.
- dark.css - is a starting point for a dark theme
- light.css - is a starting point for a light theme
- shoelace.css – the ignite shoelace adapter (ISA)
- utilities.css – useful helpers
NPM
Use NPM to install Ignite:
npm install @viur/ignite Please use postcss-import with your PostCSS pipeline.
This way you are able to get rid of ugly ../node_modules/@viur/ignite/ignite.css imports:
@import url('@viur/ignite/ignite.css');Submodule
You can add Ignite as submodule to your project as well:
git submodule add git@github.com:viur-framework/ignite.gitor
git submodule add https://github.com/viur-framework/ignite.gitNow you can import Ignite in your projects style.css
@import url('ignite/ignite.css');Builds
Preprocessed versions of Ignite can be found in dist folder:
Bundled:
@import url('@viur/ignite/dist/ignite.css');Minified:
@import url('@viur/ignite/dist/ignite.min.css');- Available for use under the MIT license