Skip to content

Instantly share code, notes, and snippets.

@trev-dev
Created August 3, 2017 00:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trev-dev/ba8863def172c757f2dce69c86bb3599 to your computer and use it in GitHub Desktop.
Save trev-dev/ba8863def172c757f2dce69c86bb3599 to your computer and use it in GitHub Desktop.
Sass + autoprefix compiled
.wrapper {
width: 960px;
max-width: 100%;
margin: 0 auto;
}
.wrapper::after {
clear: both;
content: "";
display: block;
}
.form-top {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
float: left;
margin-left: 20px;
text-align: center;
}
.column {
width: -webkit-calc(50% - 30px);
width: calc(50% - 30px);
float: left;
margin-left: 20px;
padding: 0 1.5rem;
}
@media screen and (max-with: 700px) {
.column {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
float: left;
margin-left: 20px;
}
}
.split {
margin-left: -20px;
margin-right: -20px;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
}
.split::after {
clear: both;
content: "";
display: block;
}
.split .col-1 {
width: -webkit-calc(8.33333% - 21.66667px);
width: calc(8.33333% - 21.66667px);
float: left;
margin-left: 20px;
}
.split .col-2 {
width: -webkit-calc(16.66667% - 23.33333px);
width: calc(16.66667% - 23.33333px);
float: left;
margin-left: 20px;
}
.split .col-3 {
width: -webkit-calc(25% - 25px);
width: calc(25% - 25px);
float: left;
margin-left: 20px;
}
.split .col-4 {
width: -webkit-calc(33.33333% - 26.66667px);
width: calc(33.33333% - 26.66667px);
float: left;
margin-left: 20px;
}
.split .col-5 {
width: -webkit-calc(41.66667% - 28.33333px);
width: calc(41.66667% - 28.33333px);
float: left;
margin-left: 20px;
}
.split .col-6 {
width: -webkit-calc(50% - 30px);
width: calc(50% - 30px);
float: left;
margin-left: 20px;
}
.split .col-7 {
width: -webkit-calc(58.33333% - 31.66667px);
width: calc(58.33333% - 31.66667px);
float: left;
margin-left: 20px;
}
.split .col-8 {
width: -webkit-calc(66.66667% - 33.33333px);
width: calc(66.66667% - 33.33333px);
float: left;
margin-left: 20px;
}
.split .col-9 {
width: -webkit-calc(75% - 35px);
width: calc(75% - 35px);
float: left;
margin-left: 20px;
}
.split .col-10 {
width: -webkit-calc(83.33333% - 36.66667px);
width: calc(83.33333% - 36.66667px);
float: left;
margin-left: 20px;
}
.split .col-11 {
width: -webkit-calc(91.66667% - 38.33333px);
width: calc(91.66667% - 38.33333px);
float: left;
margin-left: 20px;
}
.split .col-12 {
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
float: left;
margin-left: 20px;
}
.split .right {
float: right;
margin-right: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment