RESO UI kit 0.1

RESO UI Kit is a free UI kit that is developed to help website designers and web application developers to create beautiful user interfaces and offers a library of UI elements that are optimized for web and mobile. It is free and under continuous development. It is in a early phase and all your support and feedback is very much appreciate.

RS UI kit Style Guide

COLOR PALETTE

  • #333333
    .bg-black
  • #abb2b7
    .bg-grey
  • #c2cacf
    .bg-mid-grey
  • #e8edee
    .bg-light-grey
  • #fcfcfc
    .bg-white
  • #2fb399
    .bg-green
  • #1da288
    .bg-dark-green
  • #48dbbe
    .bg-mid-green
  • #e1fdf8
    .bg-light-green
  • #de4a38
    .bg-red
  • #b6301f
    .bg-dark-red
  • #f77566
    .bg-mid-red
  • #fbd5d1
    .bg-light-red
  • #24a7d4
    .bg-blue
  • #108cb7
    .bg-dark-blue
  • #4dccf8
    .bg-mid-blue
  • #d0f0fb
    .bg-light-blue
Just add each of the classes to your element. For changing the background color of the element based on the palette colors use .bg-[color]
Following creates a div with light green background and grey text color:
                            
<div "bg-light-green grey"></div>
                        

TYPOGRAPHY

H1: Heading 1

H1: Heading 2

H1: Heading 3

H1: Heading 4

H1: Heading 5
H1: Heading 6

BUTTONS

Normal buttons

HTML Code
                            
    <button class="rs-btn rs-btn-default">Button default</button>
    <button class="rs-btn rs-btn-primary">Button primary</button>
                        

Normal shaded buttons

HTML Code
                            
    <button class="rs-btn rs-btn-shaded-default">Button default</button>
    <button class="rs-btn rs-btn-shaded-primary">Button primary</button>
                        

Rounded buttons


HTML Code
                            
    <button class="rs-btn rs-btn-default rs-btn-rounded">Button default</button>
    <button class="rs-btn rs-btn-primary rs-btn-rounded">Button primary</button>
                        

Input elements

These inputs are responsive and will span the whole width of the parent container. To size them, put them in a wrapper with specified width size.

Input textbox

Input label - default
HTML Code
                            
    <input type="text" class="rs-input">
                        
Input label - Error
HTML Code
                            
    <input type="text" class="rs-input rs-error">
                        
Input label - Success
HTML Code
                            
    <input type="text" class="rs-input rs-success">
                        

Checkboxes

unchecked
checked
HTML Code
                            
    <div class="rs-checkbox"> 
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1"></label>
        <span>Label</span>
    </div>
                        
input id attribute and the label for should be the same.

Radio buttons

unchecked
checked
HTML Code
                            
    <div class="rs-radio">
        <input type="radio" id="radio1" name="radio"> 
        <label for="radio1"></label>
        <span>Label</span>
    </div>
                        
input id attribute and the label for should be the same.

Toggle switches

default
enabled
HTML Code
                            
    
    <div class="rs-switch">
        <input type="checkbox" id="switch1"> 
        <label for="switch1"></label> 
    </div>
                        
input id attribute and the label for should be the same.





Next Iteration

In the next release we will introduce components. Stay tuned.



Sharing is caring