Created
May 2, 2017 15:22
-
-
Save DriginCode/663a0c3439379b9b3a3c6a2bdb49e0e6 to your computer and use it in GitHub Desktop.
smart-grid-css-code-12-column-example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
@import url("../fonts/unisansac/unisansac.css"); | |
@import url("../fonts/yeseva/yeseva.css"); | |
@import url("../fonts/opensans/opensans.css"); | |
body, | |
div, | |
dl, | |
dt, | |
dd, | |
ul, | |
li, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
pre, | |
code, | |
form, | |
fieldset, | |
input, | |
textarea, | |
p, | |
blockquote, | |
th, | |
td { | |
margin: 0; | |
padding: 0; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
fieldset, | |
img, | |
abbr { | |
border: 0; | |
} | |
address, | |
caption, | |
cite, | |
code, | |
dfn, | |
em, | |
strong, | |
th, | |
var { | |
font-style: normal; | |
font-weight: normal; | |
} | |
ul li { | |
list-style: none; | |
} | |
caption, | |
th { | |
text-align: left; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-size: 100%; | |
font-weight: normal; | |
} | |
sup { | |
vertical-align: text-top; | |
} | |
sub { | |
vertical-align: text-bottom; | |
} | |
input, | |
textarea, | |
select { | |
font-family: inherit; | |
font-size: inherit; | |
font-weight: inherit; | |
} | |
legend { | |
color: #000; | |
} | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
menu, | |
nav, | |
section, | |
main { | |
display: block; | |
} | |
/* font-family: "RobotoRegular"; */ | |
@font-face { | |
font-family: "RobotoRegular"; | |
src: url("../fonts/RobotoRegular/RobotoRegular.eot"); | |
src: url("../fonts/RobotoRegular/RobotoRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoRegular/RobotoRegular.woff") format("woff"), url("../fonts/RobotoRegular/RobotoRegular.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/* font-family: "RobotoLight"; */ | |
@font-face { | |
font-family: "RobotoLight"; | |
src: url("../fonts/RobotoLight/RobotoLight.eot"); | |
src: url("../fonts/RobotoLight/RobotoLight.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoLight/RobotoLight.woff") format("woff"), url("../fonts/RobotoLight/RobotoLight.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/* font-family: "RobotoMedium"; */ | |
@font-face { | |
font-family: "RobotoMedium"; | |
src: url("../fonts/RobotoMedium/RobotoMedium.eot"); | |
src: url("../fonts/RobotoMedium/RobotoMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoMedium/RobotoMedium.woff") format("woff"), url("../fonts/RobotoMedium/RobotoMedium.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/* font-family: "RobotoBold"; */ | |
@font-face { | |
font-family: "RobotoBold"; | |
src: url("../fonts/RobotoBold/RobotoBold.eot"); | |
src: url("../fonts/RobotoBold/RobotoBold.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoBold/RobotoBold.woff") format("woff"), url("../fonts/RobotoBold/RobotoBold.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
@font-face { | |
font-family: "RobotoRegular"; | |
src: url("../fonts/RobotoRegular/RobotoRegular.eot"); | |
src: url("../fonts/RobotoRegular/RobotoRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoRegular/RobotoRegular.woff") format("woff"), url("../fonts/RobotoRegular/RobotoRegular.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
/* Код для подключения шрифта в /css/stylename.css */ | |
} | |
/* font-family: "SourceSansProRegular"; */ | |
@font-face { | |
font-family: "SourceSansProRegular"; | |
src: url("../fonts/SourceSansProRegular/SourceSansProRegular.eot"); | |
src: url("../fonts/SourceSansProRegular/SourceSansProRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansProRegular/SourceSansProRegular.woff") format("woff"), url("../fonts/SourceSansProRegular/SourceSansProRegular.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/* font-family: "SourceSansProLight"; */ | |
@font-face { | |
font-family: "SourceSansProLight"; | |
src: url("../fonts/SourceSansProLight/SourceSansProLight.eot"); | |
src: url("../fonts/SourceSansProLight/SourceSansProLight.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansProLight/SourceSansProLight.woff") format("woff"), url("../fonts/SourceSansProLight/SourceSansProLight.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/* font-family: "SourceSansProBold"; */ | |
@font-face { | |
font-family: "SourceSansProBold"; | |
src: url("../fonts/SourceSansProBold/SourceSansProBold.eot"); | |
src: url("../fonts/SourceSansProBold/SourceSansProBold.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansProBold/SourceSansProBold.woff") format("woff"), url("../fonts/SourceSansProBold/SourceSansProBold.ttf") format("truetype"); | |
font-style: normal; | |
font-weight: normal; | |
} | |
/*.grid_debug | |
@include debug(rgba(0, 0, 0, 0.2), 1px solid #ff0)*/ | |
/* Common style */ | |
*::-webkit-input-placeholder { | |
color: #666; | |
opacity: 1; | |
} | |
*:-moz-placeholder { | |
color: #666; | |
opacity: 1; | |
} | |
*::-moz-placeholder { | |
color: #666; | |
opacity: 1; | |
} | |
*:-ms-input-placeholder { | |
color: #666; | |
opacity: 1; | |
} | |
html.js .loader { | |
background: none repeat scroll 0 0 #ffffff; | |
bottom: 0; | |
height: 100%; | |
left: 0; | |
position: fixed; | |
right: 0; | |
top: 0; | |
width: 100%; | |
z-index: 9999; | |
} | |
html.js .loader_inner { | |
background-image: url("../img/preloader.gif"); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-color: #fff; | |
height: 60px; | |
width: 60px; | |
margin-top: -30px; | |
margin-left: -30px; | |
left: 50%; | |
top: 50%; | |
position: absolute; | |
} | |
html { | |
font-size: 100%; | |
} | |
body { | |
font-size: 1.25rem; | |
min-width: 800px; | |
position: relative; | |
line-height: 1.6; | |
font-family: SourceSansProRegular; | |
font-weight: 500; | |
overflow-x: hidden; | |
color: #000; | |
} | |
.hidden { | |
display: none; | |
} | |
/* Прижимаем футер вниз */ | |
html, | |
body { | |
height: 100%; | |
} | |
.wrap { | |
min-height: 100%; | |
height: auto !important; | |
height: 100%; | |
margin: 0 auto -175px; | |
} | |
/* Высота футера */ | |
.push, | |
.footer { | |
height: 175px; | |
} | |
h1 { | |
font-size: 2.6rem; | |
line-height: 2.8rem; | |
margin: 1.5rem 0; | |
} | |
h2 { | |
font-size: 2.4rem; | |
line-height: 2.6rem; | |
margin: 1rem 0; | |
} | |
p { | |
line-height: normal; | |
margin: 1rem 0; | |
font-size: 20px; | |
} | |
.bold, | |
strong { | |
font-family: "SourceSansProBold"; | |
font-weight: 600; | |
} | |
.center { | |
text-align: center; | |
} | |
.underline { | |
text-decoration: underline; | |
} | |
.cursive { | |
font-style: italic; | |
} | |
.red_text { | |
color: #B10E1C; | |
} | |
.right { | |
text-align: right; | |
} | |
.left { | |
text-align: left; | |
} | |
.relation { | |
max-width: 560px; | |
position: relative; | |
} | |
.relation__offset { | |
height: 0; | |
} | |
.relation__offset-1-1 { | |
padding-top: 100%; | |
} | |
.relation__offset-16-9 { | |
padding-top: 56.25%; | |
} | |
.relation__content { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
} | |
.relation__content iframe, | |
.relation__content object, | |
.relation__content embed { | |
width: 100%; | |
height: 100%; | |
border: none; | |
} | |
img { | |
max-width: 100%; | |
} | |
.shadow_bt { | |
text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.7); | |
} | |
.shadow_wt { | |
text-shadow: 0 0px 0 #ccc, 0 1px 0 #c9c9c9, 0 1px 0 #bbb, 0 1px 0 #b9b9b9, 0 1px 0 #aaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.15); | |
} | |
/* common style end */ | |
.container { | |
max-width: 1200px; | |
padding-left: 30px; | |
padding-right: 30px; | |
margin: 0 auto; | |
} | |
.row { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
margin-left: -15px; | |
margin-right: -15px; | |
} | |
.row-center { | |
-webkit-box-pack: center; | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.item-1 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(8.333333333333334% - 30px); | |
width: calc(8.333333333333334% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-2 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(16.666666666666668% - 30px); | |
width: calc(16.666666666666668% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-3 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(25% - 30px); | |
width: calc(25% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-4 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(33.333333333333336% - 30px); | |
width: calc(33.333333333333336% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-5 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(41.66666666666667% - 30px); | |
width: calc(41.66666666666667% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-6 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(50% - 30px); | |
width: calc(50% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-7 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(58.333333333333336% - 30px); | |
width: calc(58.333333333333336% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-8 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(66.66666666666667% - 30px); | |
width: calc(66.66666666666667% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-9 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(75% - 30px); | |
width: calc(75% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-10 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(83.33333333333334% - 30px); | |
width: calc(83.33333333333334% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-11 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(91.66666666666667% - 30px); | |
width: calc(91.66666666666667% - 30px); | |
background-color: #BEBEBE; | |
} | |
.item-12 { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin-left: 15px; | |
margin-right: 15px; | |
word-wrap: break-word; | |
width: -webkit-calc(100% - 30px); | |
width: calc(100% - 30px); | |
background-color: #BEBEBE; | |
} | |
@media screen and (max-width: 1100px) { | |
.container { | |
padding-left: 30px; | |
padding-right: 30px; | |
} | |
} | |
@media screen and (max-width: 960px) { | |
.container { | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
.row { | |
-webkit-box-pack: center; | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
} | |
@media screen and (max-width: 780px) { | |
.container { | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
} | |
@media screen and (max-width: 560px) { | |
.container { | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment