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 [email protected]:viur-framework/ignite.git

or

git submodule add https://github.com/viur-framework/ignite.git

Now 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

• @phneutral
• @sveneberth