Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

License: GPL v3

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?