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
_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
#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
_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:
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:
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:
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
_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
_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
_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"
_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
_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
_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
_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)
_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
_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
#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
_Max width: 980px
@media only screen and (max-width:980px){
.desktop-only{display: none !important;}
body{font-size: 14px;}
h1{font-size:32px;}
h2{font-size:27px;}
h3{font-size:23px;}
h4{font-size:19px;}
h5{font-size:16px;}
h6{font-size:15px;}
p{padding-top:10px;}
fieldset{
padding:12px;
border:1px solid #121212;
}
legend{
font-size: 16px;
color:#121212;
padding:0 12px;
}
label,
label.error{font-size: 14px;}
input,
select{
height: 45px;
line-height: 45px;
}
textarea{
height: 120px;
padding:12px;
}
.field-holder{margin:12px 0;}
.bttn{
min-width: 120px;
font-size: 14px;
padding:8px;
}
.bttn.large{
min-width: 150px;
font-size: 16px;
padding:10px;
}
.fixed-attachment{background-attachment: scroll !important;}
.has-large-minus-margin{margin-top: -20px !important;}
.has-minus-margin{margin-top: -10px !important;}
.has-medium-minus-margin{margin-top: -5px !important;}
.has-small-minus-margin{margin-top: 0 !important;}
.font-size-vlarge{font-size: 25px;}
.font-size-xxlarge{font-size: 23px;}
.font-size-xlarge{font-size: 20px;}
.font-size-large{font-size: 16px;}
.font-size-medium{font-size: 13px;}
.font-size-small{font-size: 12px;}
.font-size-xsmall{font-size: 10px;}
.font-size-xxsmall{font-size: 9px;}
.content{padding:20px 10px;}
.card-box{margin-bottom: 10px !important;}
.section-box{padding:12px;}
.section-box.large-padding{padding:15px;}
.section-box.normal-padding{padding:10px;}
.section-box.medium-padding{padding:7px;}
.section-box.small-padding{padding:4px;}
.half-box,
.right-side,
.left-side{
float: none !important;
width: 100% !important;
}
.half-half-box{width: 50%;}
.cl-1,
.cl-2,
.cl-3,
.cl-4,
.cl-5,
.cl-6,
.cl-7,
.cl-8,
.cl-9,
.cl-10,
.cl-11,
.cl-12{
float: none !important;
width: 100% !important;
}
.has-11-1-column > .section,
.has-1-11-column > .section,
.has-10-2-column > .section,
.has-2-10-column > .section,
.has-9-3-column > .section,
.has-3-9-column > .section,
.has-8-4-column > .section,
.has-4-8-column > .section,
.has-7-5-column > .section,
.has-5-7-column > .section,
.has-6-6-column > .section,
.has-4-4-4-column > .section{
float: none !important;
width: 100% !important;
margin:0;
}
.has-3-3-3-3-column > .section,
.has-5x2o4-column > .section,
.has-2-2-2-2-2-2-column > .section{
width: 48.75%;
margin-left: 2.5%;
}
.has-3-3-3-3-column > .section:nth-child(4n+1){margin-left: 2.5%;}
.has-5x2o4-column > .section:nth-child(5n+1){margin-left: 2.5%;}
.has-2-2-2-2-2-2-column > .section:nth-child(6n+1){margin-left: 2.5%;}
.has-3-3-3-3-column > .section:nth-child(2n+1),
.has-5x2o4-column > .section:nth-child(2n+1),
.has-2-2-2-2-2-2-column > .section:nth-child(2n+1){margin-left: 0;}
.rspv.has-6-6-column > .section,
.rspv.has-4-4-4-column > .section{
float: left !important;
width: 48.75% !important;
margin-left: 2.5% !important;
}
.rspv.has-6-6-column > .section:nth-child(2n+1),
.rspv.has-4-4-4-column > .section:nth-child(2n+1){margin-left: 0 !important;}
.nav-toggle{display: block;}
.table td,
.table th{padding:8px;}
.table.responsive table{
min-width: 0;
background-color: #ffffff;
}
.table.responsive thead{display: none;}
.table.responsive tr{display: block;}
.table.responsive tr:last-child{border-bottom: none;}
.table.responsive td{
position: relative;
display: block;
font-size: 14px;
color:#121212;
text-align: right !important;
padding-right: 120px;
}
.table.responsive td::before{
content:attr(th-data);
position: absolute;
right: 0;
top:0;
display: block;
width: 100px;
height: 100%;
color: #ffffff;
text-align: center;
padding:8px 5px 0 5px;
background-color: #121212;
}
.static-content h1{
font-size: 29px !important;
margin-top:10px !important;
}
.static-content h2{
font-size: 25px !important;
margin-top:10px !important;
}
.static-content h3{
font-size: 22px !important;
margin-top:10px !important;
}
.static-content h4{
font-size: 20px !important;
margin-top:10px !important;
}
.static-content h5{
font-size: 18px !important;
margin-top:10px !important;
}
.static-content h6{
font-size: 16px !important;
word-break: break-word !important;
margin-top:10px !important;
}
.static-content img{margin-top:10px !important;}
.static-content p{
font-size: 14px !important;
padding-top:10px !important;
}
.static-content blockquote{
font-size: 15px !important;
margin-top: 10px !important;
}
.double-quotes::before,
.double-quotes::after{font-size: 16px;}
}
- .desktop-only class will make an item hidden for lower than 980px screens
- We have defined the responsive table here
- Other items are getting responsive
_Max width: 740px
@media only screen and (max-width:740px){
input,
textarea,
select{font-size: 16px !important;}
input[type="submit"]{font-size: 14px !important;}
::-webkit-input-placeholder{font-size:14px;}
:-moz-placeholder{font-size:14px;}
::-moz-placeholder{font-size:14px;}
:-ms-input-placeholder{font-size:14px;}
.has-vlarge-padding{padding:40px !important;}
.has-vlarge-top-padding{padding-top:40px !important;}
.has-vlarge-bottom-padding{padding-bottom:40px !important;}
.has-vlarge-left-padding{padding-left:40px !important;}
.has-vlarge-right-padding{padding-right:40px !important;}
.has-vlarge-x-padding{padding:0 40px !important;}
.has-vlarge-y-padding{padding:40px 0 !important;}
.has-xxlarge-padding{padding:35px !important;}
.has-xxlarge-top-padding{padding-top:35px !important;}
.has-xxlarge-bottom-padding{padding-bottom:35px !important;}
.has-xxlarge-left-padding{padding-left:35px !important;}
.has-xxlarge-right-padding{padding-right:35px !important;}
.has-xxlarge-x-padding{padding:0 35px !important;}
.has-xxlarge-y-padding{padding:35px 0 !important;}
.has-xlarge-padding{padding:30px !important;}
.has-xlarge-top-padding{padding-top:30px !important;}
.has-xlarge-bottom-padding{padding-bottom:30px !important;}
.has-xlarge-left-padding{padding-left:30px !important;}
.has-xlarge-right-padding{padding-right:30px !important;}
.has-xlarge-x-padding{padding:0 30px !important;}
.has-xlarge-y-padding{padding:30px 0 !important;}
.has-large-padding{padding:25px !important;}
.has-large-top-padding{padding-top:25px !important;}
.has-large-bottom-padding{padding-bottom:25px !important;}
.has-large-left-padding{padding-left:25px !important;}
.has-large-right-padding{padding-right:25px !important;}
.has-large-x-padding{padding:0 25px !important;}
.has-large-y-padding{padding:25px 0 !important;}
.has-padding{padding:20px !important;}
.has-top-padding{padding-top:20px!important;}
.has-bottom-padding{padding-bottom:20px!important;}
.has-left-padding{padding-left:20px!important;}
.has-right-padding{padding-right:20px!important;}
.has-x-padding{padding:0 20px !important;}
.has-y-padding{padding:20px 0 !important;}
.has-medium-padding{padding:15px !important;}
.has-medium-top-padding{padding-top:15px !important;}
.has-medium-bottom-padding{padding-bottom:15px !important;}
.has-medium-left-padding{padding-left:15px !important;}
.has-medium-right-padding{padding-right:15px !important;}
.has-medium-x-padding{padding:0 15px !important;}
.has-medium-y-padding{padding:15px 0 !important;}
.has-small-padding{padding:10px !important;}
.has-small-top-padding{adding-top:10px !important;}
.has-small-bottom-padding{padding-bottom:10px !important;}
.has-small-left-padding{padding-left:10px !important;}
.has-small-right-padding{padding-right:10px !important;}
.has-small-x-padding{padding:0 10px !important;}
.has-small-y-padding{padding:10px 0 !important;}
.has-xsmall-padding{padding:7px !important;}
.has-xsmall-top-padding{padding-top:7px !important;}
.has-xsmall-bottom-padding{padding-bottom:7px !important;}
.has-xsmall-left-padding{padding-left:7px !important;}
.has-xsmall-right-padding{padding-right:7px !important;}
.has-xsmall-x-padding{padding:0 7px !important;}
.has-xsmall-y-padding{padding:7px 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;}
.has-vlarge-margin{margin:40px !important;}
.has-vlarge-top-margin{margin-top:40px !important;}
.has-vlarge-bottom-margin{margin-bottom:40px !important;}
.has-vlarge-left-margin{margin-left:40px !important;}
.has-vlarge-right-margin{margin-right:40px !important;}
.has-vlarge-x-margin{margin:0 40px !important;}
.has-vlarge-y-margin{margin:40px 0 !important;}
.has-xxlarge-margin{margin:35px !important;}
.has-xxlarge-top-margin{margin-top:35px !important;}
.has-xxlarge-bottom-margin{margin-bottom:35px !important;}
.has-xxlarge-left-margin{margin-left:35px !important;}
.has-xxlarge-right-margin{margin-right:35px !important;}
.has-xxlarge-x-margin{margin:0 35px !important;}
.has-xxlarge-y-margin{margin:35px 0 !important;}
.has-xlarge-margin{margin:30px !important;}
.has-xlarge-top-margin{margin-top:30px !important;}
.has-xlarge-bottom-margin{margin-bottom:30px !important;}
.has-xlarge-left-margin{margin-left:30px !important;}
.has-xlarge-right-margin{margin-right:30px !important;}
.has-xlarge-x-margin{margin:0 30px !important;}
.has-xlarge-y-margin{margin:30px 0 !important;}
.has-large-margin{margin:25px !important;}
.has-large-top-margin{margin-top:25px !important;}
.has-large-bottom-margin{margin-bottom:25px !important;}
.has-large-left-margin{margin-left:25px !important;}
.has-large-right-margin{margin-right:25px !important;}
.has-large-x-margin{margin:0 25px !important;}
.has-large-y-margin{margin:25px 0 !important;}
.has-margin{margin:20px !important;}
.has-top-margin{margin-top:20px !important;}
.has-bottom-margin{margin-bottom:20px !important;}
.has-left-margin{margin-left:20px !important;}
.has-right-margin{margin-right:20px !important;}
.has-x-margin{margin:0 20px !important;}
.has-y-margin{margin:20px 0 !important;}
.has-medium-margin{margin:15px !important;}
.has-medium-top-margin{margin-top:15px !important;}
.has-medium-bottom-margin{margin-bottom:15px !important;}
.has-medium-left-margin{margin-left:15px !important;}
.has-medium-right-margin{margin-right:15px !important;}
.has-medium-x-margin{margin:0 15px !important;}
.has-medium-y-margin{margin:15px 0 !important;}
.has-small-margin{margin:10px !important;}
.has-small-top-margin{margin-top:10px !important;}
.has-small-bottom-margin{margin-bottom:10px !important;}
.has-small-left-margin{margin-left:10px !important;}
.has-small-right-margin{margin-right:10px !important;}
.has-small-x-margin{margin:0 10px !important;}
.has-small-y-margin{margin:10px 0 !important;}
.has-xsmall-margin{margin:7px !important;}
.has-xsmall-top-margin{margin-top:7px !important;}
.has-xsmall-bottom-margin{margin-bottom:7px !important;}
.has-xsmall-left-margin{margin-left:7px !important;}
.has-xsmall-right-margin{margin-right:7px !important;}
.has-xsmall-x-margin{margin:0 7px !important;}
.has-xsmall-y-margin{margin:7px 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;}
.overlay-box{padding:15px;}
.web-tags a{padding:4px 10px;}
.tag{
min-width: 40px;
font-size: 12px;
padding:2px 5px;
}
.circle-bullet li::before{
width: 7px;
height: 7px;
margin-right: 8px;
}
.number-bullet li::before,
.tick-bullet li::before{margin-right: 8px;}
.tick-bullet li{font-size: 14px;}
.message{
width: 300px;
padding:12px;
margin-left: -150px;
}
.post-stats span::after{margin:0 5px;}
}
- Other items are getting responsive
_Max width: 640px
@media only screen and (max-width:640px){
.has-3-3-3-3-column > .section,
.has-5x2o4-column > .section,
.has-2-2-2-2-2-2-column > .section{
float: none !important;
width: 100% !important;
margin-left: 0;
}
.pagination ul li a{
width: 30px;
height: 30px;
line-height: 27px;
font-size: 14px;
}
}
- Other items are getting responsive
_Max width: 560px
@media only screen and (max-width:560px){
.tablet-desktop-only{display: none !important;}
select,
input[type="search"]{background-position-x:97%;}
.half-half-box{
float: none !important;
width: 100% !important;
}
.rspv.has-6-6-column > .section,
.rspv.has-4-4-4-column > .section{
float: none !important;
width: 100% !important;
margin:0 !important;
}
.rspv.has-6-6-column > .card-box,
.rspv.has-4-4-4-column > .card-box{margin-bottom: 10px !important;}
.pagination ul{width: 100% !important;}
.breadcrumb ul{padding:3px 18px;}
.breadcrumb ul li{
position: relative;
float: none !important;
text-align: center;
margin:20px 0;
}
.breadcrumb ul li::before{
position: absolute;
top:33px;
left:50%;
width: 9px;
height: 5px;
margin:0 -4.5px 0 0;
border-radius: 0;
}
.breadcrumb ul li:first-child::before{display: inline-block;}
.breadcrumb ul li:last-child::before{display: none;}
a.close{
top:5px;
left:5px;
}
}
- .tablet-desktop-only class will make an item hidden for lower than 560px screens
- Other items are getting responsive
_Max width: 400px
@media only screen and (max-width:400px){
.pagination ul li a{
width: 30px;
height: 30px;
line-height: 27px;
}
}
- Other items are getting responsive