Flat Remix
CSS Library


A simple css library that provides a set of predefined elements for a rapid web applications development. It Follows a modern design using "flat" colors with high contrasts and sharp borders.

↧ Download Flat-Remix.css github.com/daniruiz/Flat-Remix-CSS-library

Flat-Remix CSS Library is licensed under the MIT License

Demo

Express yourshelf
+
• Select them all


• Just select one



Selectable text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at.

Heading 1

Heading 2

Heading 3

Heading 4

But, when?
Remember Me?








How to use Flat Remix CSS Library

Flat Remix Palette


#0000ff
#3873d7
#269687
#ba174e
#9f2b32
#7c4598

Paper class

<div class="paper">
</div>

Shadow

<div class="with-shadow">
</div>



Headings


<h1>Heading 1</h1>

Heading 1

<h2>Heading 2</h2>

Heading 2

<h3>Heading 3</h3>

Heading 3

<h4>Heading 4</h4>

Heading 4

<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6

Selectable text

<div class="selectable">
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum suscipit faucibus. Nunc eget est eget leo volutpat eleifend. Mauris placerat risus a ligula suscipit, id posuere purus egestas. Maecenas commodo tempus metus, porta lobortis diam tincidunt eget. Cras porttitor mi quis nibh varius iaculis. Aenean elementum malesuada felis id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam justo, placerat id nulla vel, lacinia fermentum libero. Vivamus rutrum mollis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed ultricies nunc. Curabitur vestibulum viverra rutrum. Etiam imperdiet arcu id urna sagittis porttitor. Curabitur mollis sapien massa, a lobortis risus semper at.

Links

<a href="#">My link</a>
This is a link

Horizontal rule

<hr>


Form elements

<input type="text">
<textarea></textarea>
<label>
    <input type="checkbox" name="my-checkbox" checked> Select me
</label>
<label>
    <input type="checkbox" name="my-checkbox"> Select me
</label>
<label>
    <input type="radio" name="my-input-radio" checked> Select me
</label>
<label>
    <input type="radio" name="my-input-radio"> Select me
</label>
<label class="checktext">
    <input type="radio" name="my-checktext" checked>
    <span>09:00</span>
</label>
<label class="checktext">
    <input type="radio" name="my-checktext" >
    <span>09:00</span>
</label>
<label class="onoffswitch">
<input type="checkbox" name="my-switch">
    <span> <span></span> </span>
</label>
<button class="blue-button">save</button> <button class="green-button">enter</button> <button class="red-button">exit</button> <button class="rounded-button">+</button>