Skip to content

viur-framework/viur-ignite

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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?