Skip to content

Instantly share code, notes, and snippets.

@channaveer
Created December 13, 2019 06:33
Show Gist options
  • Save channaveer/23a4f3966f1343aa2a54646665d1749a to your computer and use it in GitHub Desktop.
Save channaveer/23a4f3966f1343aa2a54646665d1749a to your computer and use it in GitHub Desktop.
Responsive Design Startup
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.5;
background-color: #ffffff;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin: 0px auto;
padding: 0px 15px;
}
.row:before, .row:after, .container:before, .container:after {
display: table;
content: ' ';
clear: both;
}
.container:after,
.row:after {
clear: both;
}
a {
text-decoration: none;
}
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-6, .col-xs-3 {
float: left;
}
.col-xs-6 {
width: 50%;
}
.col-xs-3 {
width: 25%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
.col-sm-6, .col-sm-3 {
float: left;
}
.col-sm-6 {
width: 50%;
}
.col-sm-3 {
width: 25%;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
.col-md-6, .col-md-3 {
float: left;
}
.col-md-6 {
width: 50%;
}
.col-md-3 {
width: 25%;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
.col-lg-6, .col-lg-3 {
float: left;
}
.col-lg-6 {
width: 50%;
}
.col-lg-3 {
width: 25%;
}
}
.text-center {
text-align: center;
}
.text-blue {
color: #0056EC;
}
.btn {
padding: 10px 30px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
}
.btn-primary {
background: #0C43A4;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment