CSS library & classes

The CSS library used in this project is Pure.css It provides a set of small and responsive CSS module to get the project running and running fast.

Pure.css classes used in the project are:

Layout

• pure-u-1: Full with of the container

Buttons

• pure-button-group: Group multiple buttons together on a single line
• pure-button: Set a <a> or <button> with the plain button look

Menu

• pure-menu: Vertical Menu with minimal default styling
• pure-menu-list: Sets <ul> basic style
• pure-menu-item: Sets <li> basic style
• pure-menu-link: Sets <a> padding and font-size

Form Layout

• pure-form: Wrapper class for form fields. Can be applied to <div> or <form> tags
• pure-form-stacked: Stacks fields in a form

The file to override and customize Pure.css classes is pureovewrite.css the the css directory.

The classes in this file are:

Buttons

• button-primary: Set style and primary color
• button-large: Increase the button font-size 30% more

Components

• header: Wrapper to set the header of the page. This component should have a title and toolbar (optional)
• toolbar: Wrapper to have action int eh context of the page

Layout

• align-items-right: To align items to the end of the wrapper

Typography

• title: Set the styled of the main title in the page. Normally uses a <h1> tag
• with-navigation: This class is use if a navigation button is added inside the title tag. It will position the button before the title.