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
andborder-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