Ignite

ViUR Ignite is a sturdy boilerplate css framework

Our goal is to create a framework 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 LESS preprocessing (mixins, variables, cascading etc.) and CSS3+.

For a detailed introduction and examples have a look at ignite.viur.dev.

What is this framework for?

• Ignite is a development toolkit for sturdy HTML and CSS
• It is a lightweight collection of helpful CSS components
• It is responsive and adaptable
• It is built with LESS

Foundation

• appconf.less – stores all default variables and constants.
• basic.less – styling of all application basics (body, fonts, headlines, lists etc.).
• reset.less – resets all browsers to the same base state.
• deprecated.less – lists deprecated variables and redirectes them to their successors or a viable default.

Generic application elements

• bar.less – a multi-purpose horizontal level, which can contain other elements.
• burger.less – a common menu burger: three horizontal lines that open your hidden menu.
• button.less – a simple button with a complex feature set (hover, active, disabled, busy, different sizes and more).
• form.less – all common form elements (inputs, labels, selects, textareas, grouping etc.).
• icon.less – proper sizing and coloring for inline SVG icons used in buttons or other elements.
• message.less – a simple message template used for alerts, hints, errors, warnings etc.
• popout.less – a popout container that emerges from a location with an arrow pointing at it.
• popup.less – a popup container that appears above other content onscreen.
• table.less – a classic table layout.
• wrap.less – a basic collection of page wrappers.

LESS mixins

• basicInput.less – makes all your buttons, selects and inputs look alike.
• border.less – helps with border and border-radius.
• inputvalidation.less – unifies all graphical validation feedback for selects and inputs.
• mediaqueries.less – is a really simple solution for media queries.
• order.less – unifies order in flexbox layouts.
• position.less – simple helper mixins for object positioning.
• shadow.less – adds complex shadows to achieve different levels of depth for material designs.
• svg.less – stores a collection of useful inline SVG backgrounds used by Ignite.
• zindex.less – organizes and unifies zindex across the whole application.

---

Usage

Submodule

We recommend to add ignite as a submodule in your project:

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

or

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

LESS Import

Then you can import ignite in your projects style.less

@import "ignite/ignite";

---

Contribution guidelines

• Available for use under the GPL-3.0 license

---

Who do I talk to?

• @phneutral
• @sveneberth