-
-
Save holyPickleNick/659319ce6e765c9dbf0d to your computer and use it in GitHub Desktop.
A good starting point for your CSS
This file contains hidden or 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
/*======================================* | |
*====== Default CSS | Author: KL ======* | |
*======================================*/ | |
*, | |
*:before, | |
*:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
text-rendering: optimizeLegibility; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
font-kerning: auto; | |
} | |
html { | |
-webkit-text-size-adjust: 100%; | |
background-color:#ffffff; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
position: relative; | |
font-size: 1.8em; | |
line-height: 1.4; | |
font-weight: 400; | |
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; | |
-webkit-text-size-adjust: 100%; | |
background-color:#ffffff; | |
} | |
.clear { | |
display: block; | |
clear: both; | |
} | |
.clearfix:after { | |
content: ""; | |
display: block; | |
clear: both; | |
} | |
.noclear { | |
clear: none; | |
} | |
/*------------------* | |
*--- Typography ---* | |
*------------------*/ | |
h1,h2,h3,h4,h5,h6 { | |
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; | |
font-weight: 600; | |
clear:none; | |
} | |
.serif { | |
font-family: 'Merriweather', 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif; | |
} | |
.sans-serif { | |
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; | |
} | |
.cursive { | |
font-family: 'Playball', 'Brush Script MT', cursive; | |
} | |
.center { | |
text-align: center; | |
} | |
.caps { | |
text-transform: uppercase; | |
} | |
a, | |
a:focus, | |
a:visited { | |
color: #44aee3; | |
outline: none; | |
} | |
a:hover { | |
color: #000000; | |
text-decoration: none; | |
} | |
q:before {content: '\201c'} | |
q:after {content: '\201d'} | |
q q:before {content: '\2018'} | |
q q:after {content: '\2019'} | |
hr { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
border: 0; | |
border-top: 1px solid #b2b2b2; | |
background: none; | |
float: none !important; | |
clear: both !important; | |
} | |
/*---------------------* | |
*------ Buttons ------* | |
*---------------------*/ | |
[data-button], | |
[data-button]:visited, | |
.button, | |
.button:visited, | |
.gform_button, | |
.gform_button:visited, | |
input[type=submit] { | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
text-rendering: optimizeLegibility; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
display: inline-block; | |
width: auto; | |
margin: .5em auto; | |
padding: .4em 1.5em .5em 1.5em; | |
-webkit-appearance: none; | |
appearance: none; | |
outline: none; | |
cursor: pointer; | |
background: #44aee3; | |
font-weight: 600; | |
font-kerning: auto; | |
text-decoration: none !important; | |
text-align: center; | |
font-size: 1em; | |
line-height: 1; | |
color: #ffffff; | |
text-transform: none; | |
border: none; | |
border-top: 1px solid transparent; | |
border-left: 1px solid transparent; | |
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |
border-radius: 0; | |
text-shadow: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-webkit-transition: all 0.3s ease-in-out; | |
} | |
[data-button]:hover, | |
[data-button]:focus, | |
.button:hover, | |
.gform_button:hover, | |
input[type=submit]:hover { | |
background: #2e7ba1; | |
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); | |
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); | |
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); | |
border-top: 1px solid rgba(0, 0, 0, 0.25); | |
border-left: 1px solid rgba(0, 0, 0, 0.25); | |
} | |
[data-button]:active, | |
.button:active, | |
.gform_button:active, | |
input[type=submit]:active { | |
background: #2e7ba1; | |
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); | |
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); | |
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); | |
border-top: 1px solid rgba(0, 0, 0, 0.5); | |
border-left: 1px solid rgba(0, 0, 0, 0.5); | |
} | |
.button-large { | |
font-size: 1.5em; | |
text-transform: uppercase; | |
} | |
.button-wide { | |
padding: .4em 1.6em .36em 1.6em; | |
} | |
/*--- Line Button Theme ---*/ | |
[data-button="line"], | |
[data-button="line"]:hover, | |
[data-button="line"]:focus, | |
[data-button="line"]:active, | |
[data-button="line"]:visited { | |
background: transparent; | |
border: 1px solid rgba(255,255,255,0.75); | |
color: #ffffff !important; | |
border-radius: 0; | |
box-shadow: none; | |
} | |
[data-button="line"]:hover, | |
[data-button="line"]:focus { | |
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); | |
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); | |
} | |
[data-button="line"]:active { | |
box-shadow: inset 0 0 2px rgba(0, 0, 0, 1); | |
text-shadow: 0 0 2px rgba(0, 0, 0, 1); | |
} | |
/*--------------------------* | |
*--- Custom List Styles ---* | |
*--------------------------*/ | |
ul { | |
margin: 0 0 1.5em 0; | |
padding: 0 0 0 20px; | |
} | |
ul li { | |
padding: 0.25em 0; | |
} | |
/* CheckList Defaults */ | |
ul.checklist, | |
ul.checkbox { | |
list-style: none; | |
padding-left: 2.0em; | |
font-weight: 400; | |
} | |
ul.checklist li, | |
ul.checkbox li { | |
padding: 0; | |
margin: 5px 0; | |
} | |
ul.checklist li:before, | |
ul.checkbox li:before { | |
font-family: "FontAwesome"; | |
display :block; | |
float: left; | |
font-size: inherit; | |
line-height: inherit; | |
margin-left: -1.5em; | |
color: #eccc2c; | |
} | |
ul.checklist.check-black li:before, | |
ul.checkbox.check-black li:before { | |
color: #000000; | |
} | |
/* Check */ | |
ul.checklist li:before { | |
content: "\f00c"; | |
} | |
/* CheckBox */ | |
ul.checkbox li:before { | |
content: "\f046"; | |
} | |
/*--- Custom Icon lists ---*/ | |
/* CheckList Defaults */ | |
ul.icon-list { | |
display: inline-block; | |
list-style: none; | |
padding-left: 50px; | |
font-weight: 400; | |
} | |
ul.icon-list li { | |
display: block; | |
padding: 0; | |
margin: 15px 0; | |
line-height: 1.4em; | |
vertical-align: middle; | |
} | |
ul.icon-list li span, | |
ul.icon-list li a { | |
vertical-align: middle; | |
} | |
ul.icon-list li:after { | |
content: ""; | |
display: block; | |
clear: both; | |
} | |
ul.icon-list li:before { | |
content: "\f00c"; | |
font-family: "FontAwesome"; | |
display: inline-block; | |
float: left; | |
line-height: inherit; | |
margin-left: -41px; | |
color: #eccc2c; | |
width: 32px; | |
height: 32px; | |
font-size: 0.9em; | |
line-height: 32px; | |
font-weight: 400; | |
color: #ffffff; | |
background: #eccc2c; | |
border-radius: 50%; | |
text-align: center; | |
vertical-align: middle; | |
} | |
ul.icon-list.icon-black li:before { | |
background: #000000; | |
} | |
ul.icon-list li[data-icon="phone"]:before { | |
content: "\f10b"; | |
font-size: 1.5em; | |
} | |
ul.icon-list li[data-icon="email"]:before { | |
content: "\f0e0"; | |
} | |
ul.icon-list li[data-icon="address"]:before { | |
content: "\f041"; | |
} | |
/*--- Leaf List ---*/ | |
ul.icon-list[data-list="leaf"] { | |
margin: 0 0 20px 0; | |
padding-left: 2.5em; | |
} | |
ul.icon-list[data-list="leaf"] li:before { | |
content: "\f06c"; | |
color: #44aee3; | |
padding: 0; | |
margin-left: -1.75em; | |
font-size: 1em; | |
line-height: 1em; | |
width: 1em; | |
height: 1em; | |
line-height: inherit; | |
background: none; | |
} | |
/*--- Auto Numbering Ordered lists ---*/ | |
ol.circle-list { | |
counter-reset: section; | |
margin:0; | |
padding:0; | |
padding-left:3.2em; | |
list-style:none; | |
} | |
ol.circle-list li { | |
counter-increment: section; | |
display:block; | |
padding:15px 0; | |
vertical-align:middle; | |
line-height:1em; | |
} | |
ol.circle-list li:before { | |
content: counter(section); | |
display: inline-block; | |
margin-right: 10px; | |
margin-left: -1.75em; | |
margin-left: calc(-1.6em - 10px); | |
padding: 0; | |
width: 1.6em; | |
height: 1.6em; | |
font-size: 1.5em; | |
line-height: 1.6em; | |
font-weight: 400; | |
color: #ffffff; | |
background: #eccc2c; | |
border-radius: 50%; | |
text-align: center; | |
vertical-align: middle; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment