Skeuos CSS Neumorphism UI Framework Example

Express yourshelf

• Select them all
• Just select one



But, when?
Remember Me?

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









How to use Flat Remix CSS Library

Flat Remix Palette


--dark-blue: #265AB1
--blue: #367bf0
--green: #19A187
--red: #E43030
--maroon #B8174C
--purple: #8C42AB

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">
<select>
    <option>Level 1</option>
    <option>Level 2</option>
</select>
<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="switch">
    <input type="checkbox" name="my-switch">
    <div></div>
</label>
<button class="blue-button">save</button>
<button class="green-button">enter</button>
<button class="red-button">exit</button>
<button>Send</button>