uniCSS

The simplest, easiest to use CSS Design Framework


<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://unicss.co/uniCSS/0.0.1aaa/styleT.css"> <title>uniCSS</title> </head> <body> <h1 class="NEtitle">Hello World!</h1> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://unicss.co/uniCSS/0.0.1aaa/styleT.js"></script> </body> </html>


Buttons

<button>button</button> <button class="button_md">button_md</button> <button class="button_lg _lightBlue">button_lg</button> <button class="button_hg _pink">button_hg</button> <button class="button_sq _green">button_sq</button> <button class="_lightBlue_outline ">outline</button>


Colors

All colors above are based on A400 of the Material Pallette from material.io

<button>default</button> <button class="_red">_red</button> <button class="_pink">_pink</button> <button class="_purple">_purple</button> <button class="_deepPurple">_deepPurple</button> <button class="_indigo">_indigo</button> <button class="_blue">_blue</button> <button class="_lightBlue">_lightBlue</button> <button class="_cyan">_cyan</button> <button class="_teal">_teal</button> <button class="_green">_green</button> <button class="_lightGreen">_lightGreen</button> <button class="_lime">_lime</button> <button class="_yellow">_yellow</button> <button class="_amber">_amber</button> <button class="_orange">_orange</button> <button class="_deepOrange">_deepOrange</button>


Outline

All colors above are based on A400 of the Material Pallette from material.io

<button>default</button> <button class="_red_outline">_red_outline</button> <button class="_pink_outline">_pink_outline</button> <button class="_purple_outline">_purple_outline</button> <button class="_deepPurple_outline">_deepPurple_outline</button> <button class="_indigo_outline">_indigo_outline</button> <button class="_blue_outline">_blue_outline</button> <button class="_lightBlue_outline">_lightBlue_outline</button> <button class="_cyan_outline">_cyan_outline</button> <button class="_teal_outline">_teal_outline</button> <button class="_green_outline">_green_outline</button> <button class="_lightGreen_outline">_lightGreen_outline</button> <button class="_lime_outline">_lime_outline</button> <button class="_yellow_outline">_yellow_outline</button> <button class="_amber_outline">_amber_outline</button> <button class="_orange_outline">_orange_outline</button> <button class="_deepOrange_outline">_deepOrange_outline</button>


Navigation bar

Download Download Download Download Download Download

<NENav class="fixed"> <a href='https://ext.is'> <img src='logo.png' height='100'> </a> <a class="Ai active _indigo" href="#"><Ni class="wT">Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai active" href="#"><Ni>Download</Ni></a> </NENav>


Floating navigation bar

Download Download Download Download Download Download

<NENav> <a href='https://ext.is'> <img src='logo.png' height='100'> </a> <a class="Ai active _orange" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> <a class="Ai" href="#"><Ni>Download</Ni></a> </NENav>