Skip to content
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.
CSS
Branch: master
Clone or download
Latest commit 8ffcfe9 Jun 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Jun 16, 2019
Images Add new images Dec 15, 2018
css Fix wrong design for blue/red/green button class with inputs Mar 22, 2019
LICENSE Change license to MIT Dec 13, 2017
README.md Update README.md Dec 13, 2018
flat-remix-palette.svg Reorder palette Dec 15, 2018
paletteColors.txt Update palette colors Dec 13, 2018

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

  • #265ab1 #265ab1

  • #367bf0 #367bf0

  • #19a187 #19a187

  • #d41919 #d41919

  • #b8174c #b8174c

  • #8c42ab #8c42ab


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">
Select
<select>
    <option>Level 1</option>
    <option>Level 2</option>
</select>
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>



You can’t perform that action at this time.