A lightweight CSS library that provides a set of predesigned elements for a fast web development. It follows a modern "flat" design using high contrasts and sharp borders.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Images
css
LICENSE
README.md

README.md

Flat-Remix-CSS-library

Flat-Remix is licensed under the MIT License

A lightweight CSS library that provides a set of predesigned elements for a fast web development. It follows a modern "flat" design using high contrasts and sharp borders.

Flat Remix Palette

  • #0000ff #0000ff

  • #3873d7 #3873d7

  • #269687 #269687

  • #ba174e #ba174e

  • #9f2b32 #9f2b32

  • #7c4598 #7c4598


Paper class

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

Shadow

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

Heading 1

 <h1>Heading 1</h1>

Heading 2

  <h2>Heading 2</h2>

Heading 3

  <h3>Heading 3</h3>

Heading 4

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

Selectable text

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

Links

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

Horizontal rule

    <hr>

Form elements

Input
  <input type="text">
Textarea
  <textarea></textarea>
Checkbox
    <label>
        <input type="checkbox" name="my-checkbox" checked> Select me
    </label>
    <label>
        <input type="checkbox" name="my-checkbox"> Select me
    </label>
Input Radio
    <label>
        <input type="radio" name="my-input-radio" checked> Select me
    </label>
    <label>
        <input type="radio" name="my-input-radio"> Select me
    </label>
Checktext
    <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:30</span>
    </label>
On/Off Switch
    <label class="onoffswitch">
    <input type="checkbox" name="my-switch">
        <span data-on="yes" data-off="no"><span></span></span>
    </label>
Buttons
  <button class="blue-button">save</button>
  <button class="green-button">enter</button>
  <button class="red-button">exit</button>
  <button class="rounded-button">+</button>

Screenshot 1