presentation-css
Version:
The Augmented.js Next - Presentation SASS/CSS Module.
172 lines (146 loc) • 6.03 kB
HTML
<html>
<head>
<meta name="format-detection" content="telephone=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
<meta name="theme-color" content="#eeeee"/>
<title>Presentation CSS</title>
<style>
:root {
--primary-color: #9c27b0;
--primary-color-dark: #6a0080;
--primary-color-light: #d05ce3;
--secondary-color: #00bcd4;
--secondary-color-dark: #008ba3;
--secondary-color-light: #62efff;
--background-color: #757575;
--app-color: #EEEEEE;
--panel-color: #EEEEEE;
--app-text: rgba(0,0,0,0.85);
--border-color: rgba(0,0,0,0.85);
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../src/styles/material-generic.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<article id="main" class="main">
<section class="main panel">
<h1>Augmented.js Presentation SASS/CSS Module</h1>
<h2>What this is</h2>
<p>Augmented.js Presentation CSS is a custom implementation of Google's Material Design.
See <a href="https://material.io">Material Design</a>.<br/>
The difference from other libraries is the idea it could be used everywhere regardless of framework.
Also, the animations are <strong>pure</strong> css vs javascript, so some things will not be 100% but more performant with less footprint.
</p>
<h2>Examples of design system</h2>
<p>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.
</p>
<h2>Table of Contents</h2>
<dl>
<dd><a href="#input">Input Fields</a></dd>
<dd><a href="#button">Buttons</a></dd>
<dd><a href="#menu">Menu</a></dd>
</dl>
<h3 id="input">Input Fields</h3>
<p>Text fields let users enter and edit text. These are multiple ways to create them.</p>
<h4>Label around input</h4>
<label for="text_example">Text Field
<input type="text" placeholder="text"/>
</label>
<h4>Label next to input</h4>
<label for="text_example">Text Field</label>
<input type="text" placeholder="text"/>
<h4>Container with label and input</h4>
<div class="input">
<input type="text" placeholder="text"/>
<label for="text_example">Text Field</label>
</div>
<h4>Container with label and input (large)</h4>
<div class="input large">
<input type="text" placeholder="text"/>
<label for="text_example">Text Field</label>
</div>
<h4>Container with label and checkbox</h4>
<div class="checkbox">
<input type="checkbox" placeholder="checkbox"/>
<label for="check_example">Checkbox</label>
</div>
<h4>Container with label and checkbox (large)</h4>
<div class="checkbox large">
<input type="checkbox" placeholder="checkbox"/>
<label for="check_example">Checkbox</label>
</div>
<hr/>
<h3 id="button">Buttons</h3>
<p>Text fields let users enter and edit text. These are multiple ways to create them.</p>
<h4>Solid colored buttons</h4>
<button class="">Default Button</button>
<br/>
<button class="blue">Solid Button</button>
<br/>
<button class="red">Solid Button</button>
<br/>
<button class="green"><i class="material-icons">edit</i>Action Button</button>
<h4>Outlined colored buttons</h4>
<button class="outline">Default Button</button>
<br/>
<button class="outline blue">Outlined Button</button>
<br/>
<button class="outline red">Outlined Button</button>
<br/>
<button class="outline green"><i class="material-icons">edit</i>Action Button</button>
<h4>Flat buttons</h4>
<button class="flat">Default Button</button>
<h4>Round colored buttons</h4>
<button class="round">+</button>
<br/>
<button class="round blue">+</button>
<br/>
<button class="round red">+</button><br/>
<h4>Round Mini colored buttons</h4>
<button class="round mini">+</button>
<br/>
<button class="round mini blue">+</button>
<br/>
<button class="round mini red">+</button><br/>
<hr/>
<h3 id="menu">Menu</h3>
<h4>In Header or Panel</h4>
<div class="panel">
<nav class="menu">
<i class="material-icons">more_horiz</i>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</nav>
<p>Stuff in the panel</p>
</div>
<div class="select">
<select id="select_example">
<option value="0" selected="selected">Select something</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="select_example">Selection Example</label>
</div>
<div class="select large">
<select id="select_example">
<option value="0" selected="selected">Select something</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="select_example">Selection Example</label>
</div>
</section>
</article>
</body>
</html>