Augmented.js Presentation SASS/CSS Module

What this is

Augmented.js Presentation CSS is a custom implementation of Google's Material Design. See Material Design.
The difference from other libraries is the idea it could be used everywhere regardless of framework. Also, the animations are pure css vs javascript, so some things will not be 100% but more performant with less footprint.

Examples of design system

Styled elements are based on the basic HTML5 elements with little extra markup or classes. The intention is to be simple to impliment. These examples are at the atomic level.

Table of Contents

Input Fields
Buttons
Menu

Input Fields

Text fields let users enter and edit text. These are multiple ways to create them.

Label around input

Label next to input

Container with label and input

Container with label and input (large)

Container with label and checkbox

Container with label and checkbox (large)

Buttons

Text fields let users enter and edit text. These are multiple ways to create them.

Solid colored buttons




Outlined colored buttons




Flat buttons

Round colored buttons




Round Mini colored buttons




In Header or Panel

Stuff in the panel