SamanirA Framework
v2.7 by Saman Rashidi & Samira Salimian Download Now

What is SamanirA ?

SamanirA is an easy HTML / CSS / JS framework for "Front-end Developers" who wants to quickly build a project from 0 to 100 without waste of time on defining css classes or some javascript functions.
Created by Saman Rashidi & Samira Salimian.

Why SamanirA ?

We have done more than 50 front-end projects in 4 years and we noticed that we need a light and comprehensive css framework to work with and it will have so many benefits for our projects:

It is open source and easy to understand for changing values and classes based on your project's template
It has the same arrangement for all css properties
Most of the css classes and javascript functions that you may need are defined
Back-end developers will love you for your code discipline
Your folders, codes and classes will be the same for all projects

Where to begin ?

Download from Github
Unzip in your project's folder
Start coding your project

What are the arrangement rules for css properties ?

In SamanirA we put each css property with the same arrangement after each other, that makes your code organized and clean. You can see the arrangement rules here :

                            
Selector{
    content
    direction
    box-sizing
    position
    top
    right
    bottom
    left
    display
    vertical-align
    float
    min-width
    width
    max-width
    min-height
    height
    max-height
    line-height
    overflow
    overflow-x
    overflow-y
    font-family
    font-size
    font-weight
    font-style
    font-variant
    color
    text-align
    text-decoration
    text-transform
    text-shadow
    letter-spacing
    line-break
    word-break
    word-wrap
    padding
    padding-top
    padding-right
    padding-bottom
    padding-left
    margin
    margin-top
    margin-right
    margin-bottom
    margin-left
    resize
    visibility
    opacity
    clear
    cursor
    outline
    other properties *
    background
    border
    border-radius
    z-index
    box-shadow
    transition
    transform
    animation
}

* If you want to add more property in your css code that isn't here put them in the "other properties" area

What are the defined classes ?

In SamanirA every item that you may need to create a web page is defined in form of categories, Let's go through "samanira.css" and see how it is working:

#GLOBAL

_Main Styles


*,
*::after,
*::before{
    padding:0;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body{
    min-height: 100%;
    height: 100%;
}

body{
    line-height: 1.5;
    font-family: 'Roboto', 'Roboto-Medium', Arial, sans-serif;
    font-size:16px;
    color:#121212;
    background-color:#fefefe;
}

a{
    color: inherit;
    text-decoration:none;
    outline: none;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

a:hover,
a:focus{outline: none;}

a img{
    outline:none;
    border:none;
}

img
    display: block;
    max-width:100%;
    height: auto !important;
    margin:auto;
}

ul,
ol{list-style:none;}

h1,
h2,
h3,
h4,
h5,
h6{
    line-height: 1.3;
    font-family: 'Roboto-Medium';
    font-weight: normal;
    color:#121212;
}

h1{font-size:60px;}
h2{font-size:50px;}
h3{font-size:40px;}
h4{font-size:30px;}
h5{font-size:20px;}
h6{font-size:17px;}

p{padding-top:15px;}
p a{color:#0a9abd;}
p strong{color:#0a9abd;}

strong{font-weight: normal;}

table{
    width: 100%;
    border-collapse: collapse;
}

iframe{
    display: block;
    outline:none;
    border:none;
}

- In here we are resetting global selectors and defining the project main properties

#FORM

_Main Styles


::-webkit-input-placeholder{
    font-family: 'Roboto';
    font-size:16px;
    color: #9a9a9a;
}

:-moz-placeholder{
    font-family: 'Roboto';
    font-size:16px;
    color: #9a9a9a;
}

::-moz-placeholder{
    font-family: 'Roboto';
    font-size:16px;
    color: #9a9a9a;
}

:-ms-input-placeholder{  
    font-family: 'Roboto';
    font-size:16px;
    color: #9a9a9a;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{background-color: #ffffff;}

fieldset{
    padding:15px;
    border:1px solid #121212;
}

legend{
    font-size: 20px;
    color:#121212;
    padding:0 15px;
}

input,
textarea,
button{
    font-family: 'Roboto';
    font-size: 16px;
    color:#121212;
    outline:none;
    background-color: #ffffff;
    border:none;
    -webkit-appearance:none;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

select{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: 'Roboto';
    font-size: 16px;
    color:#121212;
    text-align: center;
    padding:0 15px;
    outline: none;
    background: url('../images/assets/arrow-bottom.png') no-repeat 95% center #ffffff;
    border:1px solid #121212;
    border-radius: 2px;
    -webkit-appearance:none;
}

input{
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding:0 15px;
    border:1px solid #121212;
    border-radius: 2px;
}

textarea{
    width: 100%;
    height: 150px;
    padding:15px;
    resize:none;
    border:1px solid #121212;
    border-radius: 2px;
}

label{
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color:#121212;
    padding-top:12px;
}

input[type="submit"]{
    display: inline-block;
    min-width: 160px;
    width: auto;
    font-size: 16px;
    color:#ffffff;
    text-align: center;
    text-transform: uppercase;
    padding:0 15px;
    cursor: pointer;
    background-color: #121212;
    border-radius: 2px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

input[type="search"]{
    padding-right: 32px;
    background: url('../images/icons/search.png') no-repeat 95% center #ffffff;
}

input[type="reset"]{
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    color: #121212;
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
}

input[type="file"]{
    position: absolute;
    top:0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 200px;
    padding:0;
    opacity: 0;
    cursor: pointer;
    border:none;
    border-radius: 2px;
    z-index: 5;
}

input.has-icon{padding-right: 40px;}
input.datepicker{cursor: pointer;}

address{font-style: normal;}

input:not([type="submit"]):focus,
textarea:focus,
select:focus{border-color: #0a9abd;}

input[type="submit"]:hover,
input[type="submit"]:focus{background-color: #0a9abd;}

- In here we are resetting form selectors and defining the project form properties

_Actions


input:not([type="submit"]):focus,
textarea:focus,
select:focus{border-color: #0a9abd;}

input[type="submit"]:hover,
input[type="submit"]:focus{background-color: #0a9abd;}

- These are the hover and focus effects for form inputs and buttons

_Validation


.error{border:1px solid #e56262 !important;}
.valid{border:1px solid #61bd61 !important;}

label.error{
    font-size: 16px;
    color:#e56262;
    padding-top:8px;
    background: none !important;
    border:none !important;
}

- These are the validation styles and will apply by jquery validate in "samanira.js"

_Classes in Form


.form-field-holder{
    position: relative;
    width: 100%;
}

.form-field-holder .field-icon{
    position: absolute;
    top:50%;
    right: 10px;
    width: 32px;
    height: 32px;
    margin-top:-16px;
    border:1px solid #121212;
}

.field-holder{
    position: relative;
    width: 100%;
    overflow: hidden;
    margin:15px 0;
}

.reverse-input{direction: rtl;}

.textarea-word-tracker{position: relative;}

.textarea-word-tracker span{
    position: absolute;
    bottom:15px;
    right:15px;
    display: inline-block;
    font-size: 15px;
}

.samanira_secure{
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border:none !important;
}

- Put each label and form item (input/textarea/select) in a <div> with class of .field-holder

- If you want to add icons to your input just wrap it in a <div> with class of .form-field-holder and then put your icon in a <span> with class of .field-icon

- .reverse-input will change the direction of an input

- .textarea-word-tracker will make a textarea with the counting number function in "samanira.js"

- .samanira_secure will be for an input with the type of text and it is for preventing form from spamming with bots in front-end side with a function in "samanira.js"

_Upload Button


.upload-bttn{
    position: absolute;
    top:0;
    right: 0;
    display: inline-block;
    width: 160px;
    height: 51px;
    line-height: 51px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
}

.upload-bttn input[type="file"]{display: none;}

.upload-bttn label{
    position: relative;
    display: block;
    font-size: 15px;
    color:#ffffff;
    padding:0;
    cursor: pointer;
    background-color: #121212;
    z-index: 6;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.upload-bttn label:hover{background-color: #0a9abd;}

.uploaded-photo-box{
    position: relative;
    display: inline-block;
    min-width: 120px;
    background-color: #f7f7f9;
    border-radius: 2px;
}

.uploaded-photo-box img{display: block;}

- This is a upload button for upload image(s) with javascript functions in "samanira.js" for front-end side

Upload Image(s)

_Radio & _Checkbox


.checkbox-holder,
.radio-holder{
    position: relative;
    width: 100%;
}

.checkbox-holder input[type="checkbox"],
.radio-holder input[type="radio"]{
    position: absolute;
    top:0;
    left:0;
    visibility: hidden;
}

.checkbox-holder input[type="checkbox"] + label,
.radio-holder input[type="radio"] + label{
    position: relative;
    display: inline-block;
    font-family: 'Roboto';
    font-size: 16px;
    color: #686b6d;
    padding:4px 0 4px 42px;
    margin:0;
    cursor: pointer;
}

.checkbox-holder input[type="checkbox"] + label::before{
    content: '';
    position: absolute;
    top: 3px;
    left:2px;
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border:1px solid #121212;
    border-radius: 2px;
}

.checkbox-holder input[type="checkbox"] + label::after{
    content: url('../images/assets/tick.png');
    position: absolute;
    top: 3px;
    left: 8px;
    width:14px;
    height: 11px;
    opacity: 0;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.checkbox-holder input[type="checkbox"]:checked + label::after{opacity: 1;}

.radio-holder input[type="radio"] + label::before{
    content: '';
    position: absolute;
    top: 3px;
    left:2px;
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    border:1px solid #121212;
    border-radius: 50%;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.radio-holder input[type="radio"] + label::after{
    content: '';
    position: absolute;
    top: 9px;
    left: 8px;
    width:13px;
    height: 13px;
    opacity: 0;
    background-color: #0a9abd;
    border-radius: 50%;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.radio-holder input[type="radio"]:checked + label::after{opacity: 1;}

- These are custom radio & checkbox inputs

Sample Checkbox 1
Sample Checkbox 2

Sample Radio 1
Sample Radio 2

#BUTTONS

_Main Styles


.button-holder{
    width: 100%;
    text-align:center;
    margin-top:20px;
}

.button-holder a,
.button-holder input{margin:0 5px;}

.bttn{
    position: relative;
    display: inline-block;
    min-width: 155px;
    font-size: 16px;
    color:#ffffff;
    text-align: center;
    padding:10px;
    background-color: #121212;
    border-radius: 2px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.bttn:hover{
    color:#121212;
    background-color: #ffffff;
}

.bttn.white{
    color:#121212;
    background-color: #ffffff;
}

.bttn.white:hover{
    color:#ffffff;
    background-color: #121212;
}

.bttn.black{background-color: #000000;}

.bttn.black:hover{
    color:#000000;
    background-color: #ffffff;
}

.bttn.site{
    color:#ffffff;
    background-color: #0a9abd;
}

.bttn.site:hover{
    color:#0a9abd;
    background-color: #ffffff;
}

.bttn.site-2{
    color:#ffffff;
    background-color: #f55757;
}

.bttn.site-2:hover{
    color:#f55757;
    background-color: #ffffff;
}

.bttn.has-icon{
    text-align: left;
    background-repeat: no-repeat !important;
    background-position: 13px center;
    padding: 10px 15px 10px 43px;
}

.bttn.small{
    min-width: 120px;
    font-size: 14px;
    padding:8px 5px;
}

.bttn.large{
    min-width: 180px;
    font-size: 18px;
    padding:12px 10px;
}

.bttn:active,
input[type="submit"]:active{
    -webkit-transform:translateY(1px);
    -moz-transform:translateY(1px);
    transform:translateY(1px);
}

- These are custom buttons and you can add more easily

Large Size
Small Size
Default Size
White Color
Black Color
Site Color
Site Color 2
Has Icon

_Switch


.switch{
    display: block;
    width: 58px;
    height: 32px;
    background: url('../images/icons/switch.png') no-repeat center;
}

.switch.active{background-image: url('../images/icons/switch-on.png');}

- Switch button for some forms and admin panels with javascript functions in "samanira.js"

_Nav Toggle


.nav-toggle{
    display: none;
    width: 30px;
    height: 21px;
    text-align: center;
    margin-top:10px;
    cursor: pointer;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.nav-toggle span{
    position: relative;
    display: block;
    height: 3px;
    margin-bottom: 6px;
    background-color: #121212;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.nav-toggle span:last-child{margin-bottom: 0;}
.nav-toggle.active{margin-top:13px;}
.nav-toggle.active span{
    margin-bottom: 3px;
    background-color: #0a9abd;
}

- Nav toggle for mobile menu display with javascript functions in "samanira.js"

_Remove & Close


a.remove{
    position: absolute;
    top: 6px;
    right: 6px;
    display: block;
    width: 28px;
    height: 28px;
    background: url('../images/assets/remove.png') no-repeat center center #ffffff;
    border-radius: 2px;
    z-index: 6;
}

a.close{
    position: absolute;
    top:10px;
    left:10px;
    width: 10px;
    height: 10px;
    background: url('../images/assets/close.png') no-repeat center;
    z-index: 10;
}

- Remove and close buttons for boxes with javascript functions in "samanira.js"

#FRAMES

_Main Styles


#wrapper{
    position: relative;
    min-width: 320px;
    width:100%;
    min-height: 100%;
}

.frame{
    max-width: 1120px;
    padding: 0 15px;
    margin:auto;
}

.frame.xxlarge{max-width: 1470px;}
.frame.xlarge{max-width: 1330px;}
.frame.large{max-width: 1230px;}
.frame.medium{max-width: 980px;}
.frame.small{max-width: 750px;}
.frame.xsmall{max-width: 530px;}
.frame.xxsmall{max-width: 430px;}

.clear-fix{
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.has-clear-fix::after{
    content:'';
    display: table;
    height: 0;
    clear: both;
    visibility: hidden;
}

.divider{
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 13px;
    margin: 0 10px;
    background-color: #121212;
}

- Define the frame of your project content with #wrapper and .frame

- Clear float of a box with .clear-fix or give .has-clear-fix to it's parent

- Separate your content or boxes with .divider

#COMMON

_Page Styles


.no-bg{background-color: transparent !important;}
.site-bg{background-color: #0a9abd;}
.site-2-bg{background-color: #f55757;}
.blue-bg{background-color:#368098;}
.green-bg{background-color:#61bd61;}
.purple-bg{background-color:#843698;}
.red-bg{background-color:#e56262;}
.yellow-bg{background-color:#e4d257;}
.orange-bg{background-color:#ef9200;}
.grey-bg{background-color:#a7a7b4;}
.black-bg{background-color:#000000;}
.white-bg{background-color:#ffffff;}

.fixed-attachment{background-attachment: fixed !important;}
.scroll-attachment{background-attachment: scroll !important;}

.auto-width{width: auto !important;}
.full-width{width: 100% !important;}
.full-height{height: 100% !important;}

.no-overflow{overflow: visible !important;}
.auto-overflow{overflow: auto !important;}
.hidden-overflow{overflow: hidden !important;}
.hidden-visibility{visibility: hidden !important;}

.inline-display{display: inline !important;}
.inline-block-display{display: inline-block !important;}
.block-display{display: block !important;}
.none-display{display: none !important;}
.table-display{
    display: table !important;
    width: 100%;
    height: 100%;
}
.table-cell-display{
    display: table-cell !important;
    width: 100%;
    height: 100%;
}

.static-position{position: static;}
.relative-position{position: relative;}
.absolute-position{position: absolute;}
.z-index{
    position: relative;
    z-index: 100;
}

.top-aligned{vertical-align: top;}
.vertical-aligned{vertical-align: middle;}
.bottom-aligned{vertical-align: bottom;}

.has-text-shadow{text-shadow: 0 0 2px #121212;}

.no-boxshadow{
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.has-boxshadow{
    -webkit-box-shadow: 0 0 10px #121212 !important;
    -moz-box-shadow: 0 0 10px #121212 !important;
    box-shadow: 0 0 10px #121212 !important;
}

.has-transition{
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    transition:all .2s linear;
}
.has-ease-transition{
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.has-ease-in-transition{
    -webkit-transition:all .2s ease-in;
    -moz-transition:all .2s ease-in;
    transition:all .2s ease-in;
}
.has-ease-out-transition{
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    transition:all .2s ease-out;
}
.has-cubic-transition{
    -webkit-transition:all .2s cubic-bezier(.15,.41,.89,.63);
    -moz-transition:all .2s cubic-bezier(.15,.41,.89,.63);
    transition:all .2s cubic-bezier(.15,.41,.89,.63);
}

- Some common pre-defined page styles to use in different situations
Here are some examples:

div
site-bg
auto-width
inline-block-display
static-position
has-boxshadow
has-small-padding

_Font Styles


.font-size-vlarge{font-size: 29px;}
.font-size-xxlarge{font-size: 25px;}
.font-size-xlarge{font-size: 22px;}
.font-size-large{font-size: 18px;}
.font-size-medium{font-size: 15px;}
.font-size-small{font-size: 13px;}
.font-size-xsmall{font-size: 11px;}
.font-size-xxsmall{font-size: 9px;}

.font-type-default{font-family: 'Roboto';}
.font-type-medium{font-family: 'Roboto-Medium';}
.font-type-different{font-family: 'Iran';}

.site-color{color:#0a9abd !important;}
.site-color-2{color:#f55757 !important;}
.blue-color{color:#368098 !important;}
.green-color{color:#61bd61 !important;}
.purple-color{color:#843698 !important;}
.red-color{color:#e56262 !important;}
.yellow-color{color:#e4d257 !important;}
.orange-color{color:#ef9200 !important;}
.grey-color{color:#a7a7b4 !important;}
.black-color{color:#000000 !important;}
.white-color{color:#ffffff !important;}

.center-aligned{text-align: center;}
.left-aligned{text-align: left;}
.right-aligned{text-align: right;}
.justify-aligned{text-align: justify;}

.uppercased{text-transform: uppercase;}
.lowercased{text-transform: lowercase;}
.capitalized{text-transform: capitalize;}

.italic-style{font-style: italic;}
.normal-style{font-style: normal;}

- Some common pre-defined font styles to use in different situations
Here are some examples:

font-size-xlarge
site-color-2
uppercased
italic-style

_Box Styles


.right-floated{float: right;}
.left-floated{float: left;}
.no-float{float: none !important;}

.no-border{border:none !important;}
.has-border{border: 1px solid #121212;}
.has-top-border{border-top: 1px solid #121212;}
.has-right-border{border-right: 1px solid #121212;}
.has-bottom-border{border-bottom: 1px solid #121212;}
.has-left-border{border-left: 1px solid #121212;}

.no-border-radius{border-radius: 0 !important;}
.has-border-radius{border-radius: 2px !important;}
.has-top-border-radius{border-radius: 2px 2px 0 0 !important;}
.has-right-border-radius{border-radius: 0 2px 2px 0 !important;}
.has-bottom-border-radius{border-radius: 0 0 2px 2px !important;}
.has-left-border-radius{border-radius: 2px 0 0 2px !important;}

.no-padding{padding:0 !important;}
.no-top-padding{padding-top: 0 !important;}
.no-bottom-padding{padding-bottom: 0 !important;}
.no-left-padding{padding-left: 0 !important;}
.no-right-padding{padding-right: 0 !important;}
.no-x-padding{
    padding-left:0 !important;
    padding-right: 0 !important;
}
.no-y-padding{
    padding-top:0 !important;
    padding-bottom: 0 !important;
}

.has-vlarge-padding{padding:80px !important;}
.has-vlarge-top-padding{padding-top:80px !important;}
.has-vlarge-bottom-padding{padding-bottom:80px !important;}
.has-vlarge-left-padding{padding-left:80px !important;}
.has-vlarge-right-padding{padding-right:80px !important;}
.has-vlarge-x-padding{padding:0 80px !important;}
.has-vlarge-y-padding{padding:80px 0 !important;}

.has-xxlarge-padding{padding:60px !important;}
.has-xxlarge-top-padding{padding-top:60px !important;}
.has-xxlarge-bottom-padding{padding-bottom:60px !important;}
.has-xxlarge-left-padding{padding-left:60px !important;}
.has-xxlarge-right-padding{padding-right:60px !important;}
.has-xxlarge-x-padding{padding:0 60px !important;}
.has-xxlarge-y-padding{padding:60px 0 !important;}

.has-xlarge-padding{padding:50px !important;}
.has-xlarge-top-padding{padding-top:50px !important;}
.has-xlarge-bottom-padding{padding-bottom:50px !important;}
.has-xlarge-left-padding{padding-left:50px !important;}
.has-xlarge-right-padding{padding-right:50px !important;}
.has-xlarge-x-padding{padding:0 50px !important;}
.has-xlarge-y-padding{padding:50px 0 !important;}

.has-large-padding{padding:40px !important;}
.has-large-top-padding{padding-top:40px !important;}
.has-large-bottom-padding{padding-bottom:40px !important;}
.has-large-left-padding{padding-left:40px !important;}
.has-large-right-padding{padding-right:40px;}
.has-large-x-padding{padding:0 40px !important;}
.has-large-y-padding{padding:40px 0 !important;}

.has-padding{padding:30px !important;}
.has-top-padding{padding-top:30px !important;}
.has-bottom-padding{padding-bottom:30px !important;}
.has-left-padding{padding-left:30px !important;}
.has-right-padding{padding-right:30px !important;}
.has-x-padding{padding:0 30px !important;}
.has-y-padding{padding:30px 0 !important;}

.has-medium-padding{padding:20px !important;}
.has-medium-top-padding{padding-top:20px !important;}
.has-medium-bottom-padding{padding-bottom:20px !important;}
.has-medium-left-padding{padding-left:20px !important;}
.has-medium-right-padding{padding-right:20px !important;}
.has-medium-x-padding{padding:0 20px !important;}
.has-medium-y-padding{padding:20px 0 !important;}

.has-small-padding{padding:15px !important;}
.has-small-top-padding{padding-top:15px !important;}
.has-small-bottom-padding{padding-bottom:15px !important;}
.has-small-left-padding{padding-left:15px !important;}
.has-small-right-padding{padding-right:15px !important;}
.has-small-x-padding{padding:0 15px !important;}
.has-small-y-padding{padding:15px 0 !important;}

.has-xsmall-padding{padding:10px !important;}
.has-xsmall-top-padding{padding-top:10px !important;}
.has-xsmall-bottom-padding{padding-bottom:10px !important;}
.has-xsmall-left-padding{padding-left:10px !important;}
.has-xsmall-right-padding{padding-right:10px !important;}
.has-xsmall-x-padding{padding:0 10px !important;}
.has-xsmall-y-padding{padding:10px 0 !important;}

.has-xxsmall-padding{padding:5px !important;}
.has-xxsmall-top-padding{padding-top:5px !important;}
.has-xxsmall-bottom-padding{padding-bottom:5px !important;}
.has-xxsmall-left-padding{padding-left:5px !important;}
.has-xxsmall-right-padding{padding-right:5px !important;}
.has-xxsmall-x-padding{padding:0 5px !important;}
.has-xxsmall-y-padding{padding:5px 0 !important;}

.no-margin{margin: 0 !important;}
.no-top-margin{margin-top:0 !important;}
.no-bottom-margin{margin-bottom: 0 !important;}
.no-left-margin{margin-left: 0 !important;}
.no-right-margin{margin-right: 0 !important;}
.no-x-margin{
    margin-left:0 !important;
    margin-right: 0 !important;
}
.no-y-margin{
    margin-top:0 !important;
    margin-bottom: 0 !important;
}

.has-auto-margin{margin: auto !important;}

.has-large-minus-margin{margin-top: -40px !important;}
.has-minus-margin{margin-top: -30px !important;}
.has-medium-minus-margin{margin-top: -20px !important;}
.has-small-minus-margin{margin-top: -10px !important;}

.has-vlarge-margin{margin:80px !important;}
.has-vlarge-top-margin{margin-top:80px !important;}
.has-vlarge-bottom-margin{margin-bottom:80px !important;}
.has-vlarge-left-margin{margin-left:80px !important;}
.has-vlarge-right-margin{margin-right:80px !important;}
.has-vlarge-x-margin{margin:0 80px !important;}
.has-vlarge-y-margin{margin:80px 0 !important;}

.has-xxlarge-margin{margin:60px !important;}
.has-xxlarge-top-margin{margin-top:60px !important;}
.has-xxlarge-bottom-margin{margin-bottom:60px !important;}
.has-xxlarge-left-margin{margin-left:60px !important;}
.has-xxlarge-right-margin{margin-right:60px !important;}
.has-xxlarge-x-margin{margin:0 60px !important;}
.has-xxlarge-y-margin{margin:60px 0 !important;}

.has-xlarge-margin{margin:50px !important;}
.has-xlarge-top-margin{margin-top:50px !important;}
.has-xlarge-bottom-margin{margin-bottom:50px !important;}
.has-xlarge-left-margin{margin-left:50px !important;}
.has-xlarge-right-margin{margin-right:50px !important;}
.has-xlarge-x-margin{margin:0 50px !important;}
.has-xlarge-y-margin{margin:50px 0 !important;}

.has-large-margin{margin:40px !important;}
.has-large-top-margin{margin-top:40px !important;}
.has-large-bottom-margin{margin-bottom:40px !important;}
.has-large-left-margin{margin-left:40px !important;}
.has-large-right-margin{margin-right:40px !important;}
.has-large-x-margin{margin:0 40px !important;}
.has-large-y-margin{margin:40px 0 !important;}

.has-margin{margin:30px !important;}
.has-top-margin{margin-top:30px !important;}
.has-bottom-margin{margin-bottom:30px !important;}
.has-left-margin{margin-left:30px !important;}
.has-right-margin{margin-right:30px !important;}
.has-x-margin{margin:0 30px !important;}
.has-y-margin{margin:30px 0 !important;}

.has-medium-margin{margin:20px !important;}
.has-medium-top-margin{margin-top:20px !important;}
.has-medium-bottom-margin{margin-bottom:20px !important;}
.has-medium-left-margin{margin-left:20px !important;}
.has-medium-right-margin{margin-right:20px !important;}
.has-medium-x-margin{margin:0 20px !important;}
.has-medium-y-margin{margin:20px 0 !important;}

.has-small-margin{margin:15px !important;}
.has-small-top-margin{margin-top:15px !important;}
.has-small-bottom-margin{margin-bottom:15px !important;}
.has-small-left-margin{margin-left:15px !important;}
.has-small-right-margin{margin-right:15px !important;}
.has-small-x-margin{margin:0 15px !important;}
.has-small-y-margin{margin:15px 0 !important;}

.has-xsmall-margin{margin:10px !important;}
.has-xsmall-top-margin{margin-top:10px !important;}
.has-xsmall-bottom-margin{margin-bottom:10px !important;}
.has-xsmall-left-margin{margin-left:10px !important;}
.has-xsmall-right-margin{margin-right:10px !important;}
.has-xsmall-x-margin{margin:0 10px !important;}
.has-xsmall-y-margin{margin:10px 0 !important;}

.has-xxsmall-margin{margin:5px !important;}
.has-xxsmall-top-margin{margin-top:5px !important;}
.has-xxsmall-bottom-margin{margin-bottom:5px !important;}
.has-xxsmall-left-margin{margin-left:5px !important;}
.has-xxsmall-right-margin{margin-right:5px !important;}
.has-xxsmall-x-margin{margin:0 5px !important;}
.has-xxsmall-y-margin{margin:5px 0 !important;}

- Some common pre-defined box styles to use in different situations
Here are some examples:

site-bg
inline-block-display
center-aligned
right-floated
has-border
has-border-radius
has-padding

#CLASSES

_Schema


.schema-item{
    display: block;
    width: 0;
    height: 0;
    font-size: 0;
    visibility: hidden;
    opacity: 0;
}

- Add schema to your web page in a <strong> with the class of .schema-item

_Overlay


.overlay{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow-y:auto;
    visibility: hidden;
    opacity: 0;
    background: rgba(0,0,0, .8);
    z-index: 9999999;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.overlay.active{
    visibility: visible;
    opacity: 1;
}

.inner-overlay{
    display: table;
    width: 100%;
    height: 100%;
}

.overlay-box{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding:20px;
}

.inner-overlay-box{
    position: relative;
    max-width: 780px;
    padding:15px;
    margin:auto;
    background-color: #ffffff;
    border-radius: 2px;
}

- Add an overlay to your webpage and it will be a nice lightbox for you

Open Overlay

I'm a box
inside
overlay

_List Items


.circle-bullet li::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 16px;
    background-color: #0a9abd;
    border-radius: 50%;
}

.circle-bullet.small li::before{
    width: 6px;
    height: 6px;
}

.number-bullet li::before{
    content:attr(list-number);
    display: inline-block;
    color: #0a9abd;
    margin-right: 8px;
}

.tick-bullet li{
    font-size: 16px;
    color: #0a9abd;
    margin-bottom: 16px;
}

.tick-bullet li:last-child{margin-bottom: 0;}

.tick-bullet li::before{
    content:'';
    display: inline-block;
    width: 14px;
    height: 11px;
    margin-right: 15px;
    background:url('../images/assets/tick.png') no-repeat center;
}

- Create a custom circle / number / tick bullet points by adding class of .circle-bullet , .number-bullet and .tick-bullet to an <ul> or <ol>

- .number-bullet is working with javascript functions in "samanira.js"

Circle Bullet 1
Circle Bullet 2
Circle Bullet 3

Number Bullet 1
Number Bullet 2
Number Bullet 3

Tick Bullet 1
Tick Bullet 2
Tick Bullet 3

_Tag


.web-tags a{
    display: inline-block;
    color:#ffffff;
    padding:5px 12px;
    margin:5px 3px;
    background-color:#121212;
    border-radius: 2px;
}

.web-tags a:hover{background-color:#0a9abd;}

.tag{
    display: inline-block;
    min-width: 52px;
    font-size: 14px;
    color:#ffffff;
    text-align: center;
    padding:3px 6px;
    margin: 2px 1px;
    background-color: #121212;
    border-radius: 2px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.tag:hover{background-color: #565656;}

.site-label{background-color:#0a9abd;}
.site-label:hover{background-color:#f55757;}


.blue-label{background-color: #368098 !important;}
.blue-label:hover{background-color: #246073 !important;}


.green-label{background-color: #61bd61 !important;}
.green-label:hover{background-color: #3c893c !important;}


.purple-label{background-color: #843698 !important;}
.purple-label:hover{background-color: #532160 !important;}


.red-label{background-color: #e56262 !important;}
.red-label:hover{background-color: #c83a3a !important;}


.yellow-label{background-color: #e4d257 !important;}
.yellow-label:hover{background-color: #d6bb00 !important;}


.orange-label{background-color: #ef9200 !important;}
.orange-label:hover{background-color: #bb7301 !important;}


.grey-label{background-color: #a4a4a4 !important;}
.grey-label:hover{background-color: #888888 !important;}


.black-label{background-color: #323232 !important;}
.black-label:hover{background-color: #000000 !important;}


.white-label{
    color:#121212 !important;
    background-color: #ffffff !important;
}

.white-label:hover{background-color: #b7b7b7 !important;}

- Create nice tags and web-tags with different labels

Web Tags:

#beauty #fashion #style

Label Tags:

normal site-label blue-label green-label purple-label red-label yellow-label orange-label grey-label black-label white-label

_Post Stats


.post-stats{
    width: 100%;
    overflow: hidden;
}

.post-stats span{
    display: inline-block;
    vertical-align: middle;
    color:#9a9a9a;
}

.post-stats span::after{
    content:'•';
    display: inline-block;
    vertical-align: middle;
    color:#121212;
    margin:0 7px;
}

.post-stats span:last-child::after{display: none;}

- Create a nice defined stats for a post

Hi This is a nice post or comment

2017/05/12 76 view 2039 like

_Message


.message{
    position: fixed;
    top:-100px;
    left:50%;
    width: 600px;
    padding:16px;
    margin-left: -300px;
    background-color: #121212;
    border-radius: 2px;
    z-index: 99999999;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.message span{
    display: block;
    color:#ffffff;
    padding:2px 0 0 25px;
    background-repeat: no-repeat;
    background-position:left center;
}

.message.active{top:15px;}

.message.success{background-color: #61bd61;}
.message.success span{background-image: url('../images/icons/success.png');}

.message.fail{background-color: #e56262;}
.message.fail span{background-image: url('../images/icons/error.png');}

- Create a message-box for your notifications with javascript functions in "samanira.js"

Open Success Message

There is a success message for you in here

_Star Rating


.star-box{
    width: 100%;
    margin-top:5px;
}

.star-box span{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 14px;
    background: url('../images/icons/star.png') no-repeat center center;
}

.star-box span.active{background-image: url('../images/icons/star-active.png');}

.star-box i{
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-size: 14px;
    padding-top:2px;
    margin-left: 7px;
}

- Add a star rating system to your article or comment

3/5

_Quotes


.double-quotes::before{
    content:'"';
    font-family: 'Roboto-Medium';
    font-size: 18px;
    color:#000000;
}

.double-quotes::after{
    content:'"';
    font-family: 'Roboto-Medium';
    font-size: 18px;
    color:#000000;
}

- Write a quote from someone in a <div> with class of .double-quotes

SamanirA is an awesome framework

_Pagination


.pagination{
    width: 100%;
    margin: 10px 0;
    padding: 25px 0 15px 0;
}

.pagination ul{
    width: auto;
    text-align: center;
    margin: auto;
}

.pagination ul li{
    display: inline-block;   
    vertical-align: middle;
    text-align: center;
    margin: 0 1px;
}

.pagination ul li a{
    display: block;
    width: 40px;
    height: 40px;
    line-height: 41px;
    font-size: 15px;
    color:#121212;
    background-color: #ffffff;
    border:1px solid #121212;
    border-radius: 2px;
}

.pagination ul li.active a{
    color:#ffffff;
    background-color: #121212;
}

.pagination ul li.prev a{background: url('../images/assets/prev.png') no-repeat center center #ffffff;}
.pagination ul li.next a{background: url('../images/assets/next.png') no-repeat center center #ffffff;}

.pagination ul li.etc a{
    width: 25px;
    color: #121212;
    background-color: transparent;
    border-color: transparent;
}

.pagination ul li.prev,
.pagination ul li.next{margin: 0 6px;}

.pagination ul li:not(.active):not(.etc) a:hover{
    color: #0a9abd;
    border-color: #0a9abd;
}

- A nice paginagtion for your listing pages

_Breadcrumb


.breadcrumb{
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.breadcrumb ul{
    display: block;
    overflow: hidden;
    padding:15px 18px;
    background-color: #ffffff;
    border-radius: 2px;
}

.breadcrumb ul li{
    float: left;
    color: #121212;
}

.breadcrumb ul li::before{
    content:'';
    display: inline-block;
    width: 12px;
    height: 2px;
    margin:0 12px;
    background-color: #121212;
    border-radius: 2px;
    -webkit-transform:translateY(-3px);
    -moz-transform:translateY(-3px);
    transform:translateY(-3px);
}

.breadcrumb ul li:first-child::before{display: none;}
.breadcrumb ul li a{color:#121212;}
.breadcrumb ul li a:hover{color:#0a9abd;}

- You can have a nice breadcrumb for your website

_Text Editors (change the style of all content comes from text editors)


.static-content h1{
    font-size: 60px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content h2{
    font-size: 50px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content h3{
    font-size: 40px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content h4{
    font-size: 30px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content h5{
    font-size: 20px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content h6{
    font-size: 17px !important;
    word-break: break-word !important;
    margin-top:15px !important;
}

.static-content img,
.static-content .video-player{margin-top:15px !important;}

.static-content p{
    font-size: 16px !important;
    word-break: break-word !important;
    padding-top:15px !important;
}

.static-content p strong{font-family: 'Roboto-Medium' !important;}
.static-content p a{color:#0a9abd !important;}

.static-content blockquote{
    font-family: 'Roboto-Medium' !important;
    font-size: 18px !important;
    color: #000000 !important;
    margin-top: 15px !important;
}

.static-content ul,
.static-content ol{margin:5px 0 0 10px;}

.static-content ul li::before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 12px;
    background-color: #121212;
    border-radius: 50%;
}

.static-content ol li::before{
    content: attr(list-number);
    display: inline-block;
    margin-right: 6px;
}

- When you add a text or image with text editor, it's style will be broken, when you put it in a <div> with class of .static-content it will have the styles same as others in your web page

_Google Map


#map_canvas{
    position: relative;
    width:100%;
    height:300px;
}

#map_canvas img{
    max-width:none!important;
    background:none!important;
}

- Some defined classes for google map setup

#TABLES

_Main Styles


.table{width: 100%;}

.table.scrollable{overflow-x:auto;}
.table.scrollable table{min-width: 980px;}

.table tr{border-bottom: 1px solid #efeef2;}

.table td,
.table th{
    text-align: left;
    padding:15px;
}

.table a{color:#0a9abd;}
.table td a:hover{color:#0a9abd;}

.table th{
    font-family: 'Roboto';
    color:#ffffff;
    background-color: #0a9abd;
}

.table tr.active td{background-color: #f7f7f9;}

- Add a nice table to your website by wrapping the table in a <div> with class of .table

Header Cell 1	Header Cell 2	Header Cell 3
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell

- Make it scrollable in lower than 980px boxes by adding class of .scrollable to the <div> with class of .table

Header Cell 1	Header Cell 2	Header Cell 3
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell

- Make it responsive in lower than 980px screens by adding class of .responsive to the <div> with class of .table

Header Cell 1	Header Cell 2	Header Cell 3
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell
Standard Cell	Standard Cell	Standard Cell

_Table Filter


.table-filter{
    font-family: 'Roboto-Medium';
    padding-left: 15px;
    cursor: pointer;
    background: url('../images/assets/arrow-down-black.png') no-repeat left 6px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}

.table-filter.active{background: url('../images/assets/arrow-up-black.png') no-repeat left center}

- You can see the .table-filter in example 1 of table

_Div Table


.div-table .row{
    display: table;
    width: 100%;
}

.div-table .column{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    padding:0 10px;
}

- .div-table is the <div> and css version of table for more flexibility

Div Column 1

Div Column 2

Div Column 1

Div Column 2

_Table Columns


.column-5{width: 5%;}
.column-10{width: 10%;}
.column-15{width: 15%;}
.column-20{width: 20%;}
.column-25{width: 25%;}
.column-30{width: 30%;}
.column-35{width: 35%;}
.column-40{width: 40%;}
.column-45{width: 45%;}
.column-50{width: 50%;}
.column-55{width: 55%;}
.column-60{width: 60%;}
.column-65{width: 65%;}
.column-70{width: 70%;}
.column-75{width: 75%;}
.column-80{width: 80%;}
.column-85{width: 85%;}
.column-90{width: 90%;}
.column-95{width: 95%;}

- You can see the columns in table 1 & 2 example

#LAYOUT

_Main Styles


.content{padding:30px 20px;}

.section-wrapper{width: 100%;}
.section-wrapper::before{
    content: " ";
    display: table;
    clear: both;
}

.section-wrapper::after{
    content: " ";
    display: table;
    clear:both;
}

.card-box{margin-bottom: 20px;}
.card-box:last-child{margin-bottom: 0;}

.section{
    float: left;
    width: 100%;
}

.section.reverse{float: right;}

.section.centered{
    float: none;
    margin:auto;
}

.section-box{
    position: relative;
    width: 100%;
    padding:30px;
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 2px;
}

.section-box.solo{float: none;}

.section-box.large-padding{padding:40px;}
.section-box.normal-padding{padding:25px;}
.section-box.medium-padding{padding:20px;}
.section-box.small-padding{padding:10px;}

.section-box-title{
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid #9a9a9a;
}

.section-box-content{
    width: 100%;
    padding:15px 0;
}

.section-box-footer{
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid #9a9a9a;
}

- These are the main items for your website layout and they are fully responsive.
You will see some examples in the bottom

_Normal Columns


.half-box{
    float: left;
    width: 50%;
}

.half-half-box{
    float: left;
    width: 25%;
}

.left-side{
    float: left;
    width: 50%;
    overflow: hidden;
}

.right-side{
    float: right;
    width: 50%;
    overflow: hidden;
}

- Here is an example of the normal way that you can make two boxes beside each other (remember to clear after it because of the floated item)

half-box

_Cl Columns


.section-wrapper.cl-column > .section{padding:0 15px;}
.section-wrapper.cl-column.y-padd > .section{padding:15px;}

.cl-1{width: 8.33333333% !important;}
.cl-2{width: 16.6666667% !important;}
.cl-3{width: 25% !important;}
.cl-4{width: 33.33333333% !important;}
.cl-5{width: 41.6666667% !important;}
.cl-6{width: 50% !important;}
.cl-7{width: 58.33333333% !important;}
.cl-8{width: 66.66666666% !important;}
.cl-9{width: 75% !important;}
.cl-10{width: 83.3333334% !important;}
.cl-11{width: 91.6666667% !important;}
.cl-12{width: 100% !important;}

- Here are the examples of the .cl way of box layout.
They will get responsive in below 980px screens

cl-1

cl-11

cl-1

cl-2

cl-10

cl-2

cl-3

cl-9

cl-3

cl-4

cl-8

cl-4

cl-5

cl-7

cl-5

cl-6

cl-4

cl-3

cl-2

cl-1

cl-2

cl-1

cl-2

_Has Columns


.has-11-1-column > .section{
    width: 15%;
    margin-left: 2%;
}

.has-11-1-column > .section:nth-child(2n+1){
    width: 83%;
    margin-left: 0;
}

.has-1-11-column > .section{
    width: 83%;
    margin-left: 2%;
}

.has-1-11-column > .section:nth-child(2n+1){
    width: 15%;
    margin-left: 0;
}

.has-10-2-column > .section{
    width: 20%;
    margin-left: 2%;
}

.has-10-2-column > .section:nth-child(2n+1){
    width: 78%;
    margin-left: 0;
}

.has-2-10-column > .section{
    width: 78%;
    margin-left: 2%;
}

.has-2-10-column > .section:nth-child(2n+1){
    width: 20%;
    margin-left: 0;
}

.has-9-3-column > .section{
    width: 25%;
    margin-left: 2.5%;
}

.has-9-3-column > .section:nth-child(2n+1){
    width: 72.5%;
    margin-left: 0;
}

.has-3-9-column > .section{
    width: 72.5%;
    margin-left: 2.5%;
}

.has-3-9-column > .section:nth-child(2n+1){
    width: 25%;
    margin-left: 0;
}

.has-8-4-column > .section{
    width: 35%;
    margin-left: 3%;
}

.has-8-4-column > .section:nth-child(2n+1){
    width: 62%;
    margin-left: 0;
}

.has-4-8-column > .section{
    width: 62%;
    margin-left: 3%;
}

.has-4-8-column > .section:nth-child(2n+1){
    width: 35%;
    margin-left: 0;
}

.has-7-5-column > .section{
    width: 40.625%;
    margin-left: 2.5%;
}

.has-7-5-column > .section:nth-child(2n+1){
    width: 56.875%;
    margin-left: 0;
}

.has-5-7-column > .section{
    width: 56.875%;
    margin-left: 2.5%;
}

.has-5-7-column > .section:nth-child(2n+1){
    width: 40.625%;
    margin-left: 0;
}

.has-6-6-column > .section{
    width: 48.75%;
    margin-left: 2.5%;
}

.has-6-6-column > .section:nth-child(2n+1){margin-left: 0;}

.has-4-4-4-column > .section{
    width: 31.66666666666667%;
    margin-left: 2.5%;
}

.has-4-4-4-column > .section:nth-child(3n+1){margin-left: 0;}

.has-3-3-3-3-column > .section{
    width: 23.72%;
    margin-left: 1.706%;
}

.has-3-3-3-3-column > .section:nth-child(4n+1){margin-left: 0;}

.has-5x2o4-column > .section{
    width: 18%;
    margin-left: 2.5%;
}

.has-5x2o4-column > .section:nth-child(5n+1){margin-left: 0;}

.has-2-2-2-2-2-2-column > .section{
    width: 15%;
    margin-left: 2%;
}

.has-2-2-2-2-2-2-column > .section:nth-child(6n+1){margin-left: 0;}

- Here are the examples of the .has-column way of box layout.
They will get responsive in below 980px & 640px screens

* If you add .rspv to the <div> with class of .section-wrapper it will make the .has-6-6-column & .has-4-4-4-column responsive in below 560px screens

div 11

div 1

div 11

div 10

div 2

div 10

div 9

div 3

div 9

div 8

div 4

div 8

div 5

div 7

div 5

div 6

div 6 rspv

div 4

div 4 rspv

div 3

div 2.4

div 2

#RESPONSIVE

_Min width: 980px


@media only screen and (min-width:980px){

    .tablet-only{display: none !important;}

}

- .tablet-only class will make an item hidden for above 980px screens

_Min width: 560px


@media only screen and (min-width:560px){

    .mobile-only{display: none !important;}

}

- .mobile-only class will make an item hidden for above 560px screens