joelgrodriguez/flat-remix-css

A lightweight CSS library that provides a set of predesigned elements useful for rapid web development. It follows a modern flat design using a colorful palette with some shadows, highlights, and gradients for some depth.

Flat-Remix-CSS-library

Flat-Remix is licensed under the MIT License

---

Flat Remix Palette

• #265ab1

• #367bf0

• #19a187

• #d41919

• #b8174c

• #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>

---