Universal Atomic CSS framework

UniCSS { Css: Framework }

For flexible, accessible and responsive websites

Samples UniCSS

Forms
Simple form

Show/hide code
<form class="w100">
	<fieldset>
		<legend>Simple form</legend>
		<p><label>Name <input type="text" class="w100" placeholder="name"></label></p>
		<p><label>Phone <input type="text" class="w100" placeholder="phone"></label></p>
		<p><label>Message <textarea class="w100" placeholder="message"></textarea></label></p>
		<p><label><input type="checkbox"> I agree with the rules</label></p>
		<p><button type="submit" class="i-check">Send</button> <button type="reset" class="i-undo bg-gray400 hover-bg-gray500">Reset</button></p>
	</fieldset>
</form>

Show/hide code
<form class="w100">
	<p class="flex flex-vcenter mar20-b"><i class="i-user t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="name"></p>
	<p class="flex flex-vcenter mar20-b"><i class="i-envelope-o t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="email"></p>
	<p class="flex flex-vcenter mar20-b"><i class="i-phone t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="phone"></p>
	<p class="flex mar20-b"><i class="i-pencil t-gray mar10-r pad7-t"></i><textarea class="w100 light" placeholder="message" rows="2"></textarea></p>
	<p class="t-right"><button type="submit" class="i-check pad50-rl">Send</button></p>
</form>
Colors
white
black

gray
gray
50
100
200
300
400
500
600
700
800
900

red
red
50
100
200
300
400
500
600
700
800
900

green
green
50
100
200
300
400
500
600
700
800
900

blue
blue
50
100
200
300
400
500
600
700
800
900

yellow
yellow
50
100
200
300
400
500
600
700
800
900

orange
orange
50
100
200
300
400
500
600
700
800
900

olive
olive
50
100
200
300
400
500
600
700
800
900

teal
teal
50
100
200
300
400
500
600
700
800
900

purple
purple
50
100
200
300
400
500
600
700
800
900

pink
pink
50
100
200
300
400
500
600
700
800
900

brown
brown
50
100
200
300
400
500
600
700
800
900

color1
color2
color3
color4
color5

colorA1
colorA2
colorA3
colorA4
colorA5

bg-op10
bg-op20
bg-op30
bg-op40
bg-op50
bg-op60
bg-op70
bg-op80
bg-op90
bg-op10
bg-op20
bg-op30
bg-op40
bg-op50
bg-op60
bg-op70
bg-op80
bg-op90
bg-op10
bg-op20
bg-op30
bg-op40
bg-op50
bg-op60
bg-op70
bg-op80
bg-op90
bg-op10
bg-op20
bg-op30
bg-op40
bg-op50
bg-op60
bg-op70
bg-op80
bg-op90
bg-op10
bg-op20
bg-op30
bg-op40
bg-op50
bg-op60
bg-op70
bg-op80
bg-op90
Icons

Font Awesome

Show/hide code
<span class="i-user icon-circle t200 bg-red t-white"></span> 
<span class="i-user icon-circle t150 bg-red t-white"></span> 
<span class="i-user icon-circle t110 bg-red t-white"></span>

Show/hide code
<span class="i-plane icon-square t200 bg-blue t-white"></span> 
<span class="i-plane icon-square t150 bg-blue t-white"></span> 
<span class="i-plane icon-square t110 bg-blue t-white"></span>

Show/hide code
<span class="i-ship icon-rounded t200 bg-green t-white"></span> 
<span class="i-ship icon-rounded t150 bg-green t-white"></span> 
<span class="i-ship icon-rounded t110 bg-green t-white"></span>

Show/hide code
<i class="i-subway t-icon"></i> 
<i class="i-subway t-icon-small"></i> 
<i class="i-subway t-icon-medium"></i> 
<i class="i-subway t-icon-large"></i>
Gradients
.gr-gray400-100
.gr-gray100-400
Show/hide code
<div class="gr-gray400-100 pad20 t-center">.gr-gray400-100</div>
<div class="gr-gray100-400 pad20 t-center">.gr-gray100-400</div>
Border
bordered
simple border
bor-red bor-solid
red border
bor4 bor-olive bor-solid
4px olive border
bor-gray500 bor-dashed
dashed border
bor-color1 bor-solid-l bor3
left border
bor-blue bor-dashed bor1 bor-none-r bor-none-l
hide top and bottom border
HR
<hr>

<hr class="dashed">

<hr class="dotted">

<hr class="double">

<hr class="bor2">

<hr class="bor-red">

<hr class="bor-blue bor2">

<hr class="bor-green bor3 bor-double-t">

<hr class="bor-teal bor-dotted">

<hr class="bor-teal bor-dotted-t">

<hr class="bor-teal bor-dashed-t">

<hr class="bor-dotted-t bor5 bor-gray w30px b-center">

Button

Link button

Show/hide code
<button class="button">Simple button</button> 
<button class="button" disabled>Disabled button</button> 
<button class="button i-check">Button with icon</button> 
<button class="button bg-red t-red100 hover-bg-red600 hover-t-white">Custom button</button> 
<a class="button i-pencil bg-color1 t-white hover-bg-colorA1 hover-t-white" href="">Link button</a>
Links

color1 color2 color3 color4 color5

Show/hide code
<a class="hover-no-underline pad10 t-white bg-color1 hover-t-white hover-bg-colorA1" href="#">color1</a> 
<a class="hover-no-underline pad10 t-white bg-color2 hover-t-white hover-bg-colorA2" href="#">color2</a> 
<a class="hover-no-underline pad10 t-white bg-color3 hover-t-white hover-bg-colorA3" href="#">color3</a> 
<a class="hover-no-underline pad10 t-white bg-color4 hover-t-white hover-bg-colorA4" href="#">color4</a> 
<a class="hover-no-underline pad10 t-white bg-color5 hover-t-white hover-bg-colorA5" href="#">color5</a>

Show/hide code
<nav class="t-red links-no-color links-hover-t-blue">
Menu » 
<a href="#">Link1</a> / 
<a href="#">Link2</a> / 
<a href="#">Link3</a> 
<a class="hover-no-underline hover-t-green i-user b-inline b-right" href="#">Profile</a>
</nav>

Show/hide code
<nav class="t-pink">
Menu » 
<a class="t-red hover-t-red600" href="#">red</a> / 
<a class="t-green hover-t-green600" href="#">green</a> / 
<a class="t-blue hover-t-blue600" href="#">blue</a>
</nav>
Width and Flex
30%
30%
30%
Show/hide code
<div class="flex">
	<div class="w30 bordered pad20">30%</div>
	<div class="w30 bordered pad20">30%</div>
	<div class="w30 bordered pad20">30%</div>
</div>

20% 50% 100%
20% 50% 100%
55% 100% 100%
Show/hide code
<div class="flex flex-wrap">
	<div class="w20 w50-tablet w100-phone bordered pad20">20% 50% 100%</div>
	<div class="w20 w50-tablet w100-phone bordered pad20">20% 50% 100%</div>
	<div class="w55 w100-tablet w100-phone bordered pad20">55% 100% 100%</div>
</div>

1
2
3
Show/hide code
<div class="flex t-center">
	<div class="w30 flex-order3 bordered pad20">1</div>
	<div class="w30 flex-order1 bordered pad20">2</div>
	<div class="w30 flex-order2 bordered pad20">3</div>
</div>

200px
grow 2
grow 3
Show/hide code
<div class="flex">
	<div class="w200px bordered pad20">200px</div>
	<div class="w10px"></div><!-- 10px -->
	<div class="flex-grow2 bordered pad20">grow 2</div>
	<div class="w5"></div><!-- 5% -->
	<div class="flex-grow3 bordered pad20">grow 3</div>
</div>
Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Show/hide code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading and paragraph

Heading 1

Donec viverra nibh et dolor. Nulla velit. Ut a pede ac neque mattis facilisis. Nunc eu ipsum tincidunt risus pellentesque fringilla. Quisque congue ultricies neque. Ut magna. Curabitur id est. Aliquam dictum gravida libero. Sed consectetuer sodales justo. Cras pellentesque erat eu urna. Morbi sit amet mi. Integer iaculis.

Heading 2

Aliquam congue pede a ipsum. Nam ut sapien quis arcu ullamcorper cursus. Aliquam sit amet felis. Sed consectetuer sodales justo. Sed iaculis ultricies tellus. Nunc fermentum convallis ligula. Phasellus in neque. Cras malesuada. Etiam congue. Donec vitae felis nec ligula blandit rhoncus. Suspendisse in nulla. Aliquam dictum gravida libero.

Heading 3

Donec viverra nibh et dolor. Nullam a nisl. Vivamus vitae risus vitae lorem iaculis placerat. Morbi blandit mollis magna. Integer iaculis pharetra eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue ultricies neque. Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. Cras pellentesque erat eu urna.

Heading 4

Sed eu turpis. Cras pellentesque erat eu urna. Nullam a nisl. Suspendisse eu tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quam mauris, vehicula non, suscipit at, venenatis sed, arcu. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam congue pede a ipsum. Morbi sit amet mi. Nunc id.

Heading 5

Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. Nunc eu ipsum tincidunt risus pellentesque fringilla. Curabitur id est. Etiam ornare fermentum felis. Aenean quam mauris, vehicula non, suscipit at, venenatis sed, arcu. Sed convallis turpis a ante. Donec viverra nibh et dolor. Vivamus vitae risus vitae lorem.

Heading 6

. Nam ut sapien quis arcu ullamcorper cursus. Nulla velit. In vehicula. Suspendisse in nulla. Phasellus in neque. Donec viverra nibh et dolor. Integer iaculis pharetra eros. Sed eu turpis. Nunc id lorem. Sed iaculis ultricies tellus. Morbi sit amet mi. Morbi blandit mollis magna. Donec risus risus, pretium ac,.

Show/hide code
<h1>Heading 1</h1>
<p>Donec viverra nibh et dolor. Nulla velit. Ut a pede ac neque mattis facilisis. Nunc eu ipsum tincidunt risus pellentesque fringilla. Quisque congue ultricies neque. Ut magna. Curabitur id est. Aliquam dictum gravida libero. Sed consectetuer sodales justo. Cras pellentesque erat eu urna. Morbi sit amet mi. Integer iaculis.</p>
<h2>Heading 2</h2>
<p>Aliquam congue pede a ipsum. Nam ut sapien quis arcu ullamcorper cursus. Aliquam sit amet felis. Sed consectetuer sodales justo. Sed iaculis ultricies tellus. Nunc fermentum convallis ligula. Phasellus in neque. Cras malesuada. Etiam congue. Donec vitae felis nec ligula blandit rhoncus. Suspendisse in nulla. Aliquam dictum gravida libero.</p>
<h3>Heading 3</h3>
<p>Donec viverra nibh et dolor. Nullam a nisl. Vivamus vitae risus vitae lorem iaculis placerat. Morbi blandit mollis magna. Integer iaculis pharetra eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue ultricies neque. Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. Cras pellentesque erat eu urna.</p>
<h4>Heading 4</h4>
<p>Sed eu turpis. Cras pellentesque erat eu urna. Nullam a nisl. Suspendisse eu tortor.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quam mauris, vehicula non, suscipit at, venenatis sed, arcu. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam congue pede a ipsum. Morbi sit amet mi. Nunc id.</p>
<h5>Heading 5</h5>
<p>Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. Nunc eu ipsum tincidunt risus pellentesque fringilla. Curabitur id est. Etiam ornare fermentum felis. Aenean quam mauris, vehicula non, suscipit at, venenatis sed, arcu. Sed convallis turpis a ante. Donec viverra nibh et dolor. Vivamus vitae risus vitae lorem.</p>
<h6>Heading 6</h6>
<p>. Nam ut sapien quis arcu ullamcorper cursus. Nulla velit. In vehicula. Suspendisse in nulla. Phasellus in neque. Donec viverra nibh et dolor. Integer iaculis pharetra eros. Sed eu turpis. Nunc id lorem. Sed iaculis ultricies tellus. Morbi sit amet mi. Morbi blandit mollis magna. Donec risus risus, pretium ac,.</p>
Blockquote

Nunc id lorem. Donec vitae felis nec ligula blandit rhoncus. Cras malesuada. Vestibulum tempor nisi rhoncus eros. Sed consectetuer sodales justo. Nunc eu ipsum tincidunt risus pellentesque fringilla. Maecenas.

Lorem author

Show/hide code
<blockquote>
<p>Nunc id lorem. Donec vitae felis nec ligula blandit rhoncus. Cras malesuada. Vestibulum tempor nisi rhoncus eros. Sed consectetuer sodales justo. Nunc eu ipsum tincidunt risus pellentesque fringilla. Maecenas.</p>
<p><cite>Lorem author</cite></p>
</blockquote>