Skip to content

Instantly share code, notes, and snippets.

@cjkoepke
Created February 26, 2015 15:54
Show Gist options
  • Save cjkoepke/1534d3e93e8479b0b87e to your computer and use it in GitHub Desktop.
Save cjkoepke/1534d3e93e8479b0b87e to your computer and use it in GitHub Desktop.
Basic Styling from the Genesis Child Theme (preview snippet)
/* # Imports
---------------------------------------------------------------------------------------------------- */
@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
/* # HTML5 Reset
---------------------------------------------------------------------------------------------------- */
/* ## Baseline Normalize
--------------------------------------------- */
/* normalize.css v3.0.1 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#333}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/* ## Box Sizing
--------------------------------------------- */
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ## Float Clearing
--------------------------------------------- */
.author-box:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.footer-widgets:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.wrap:before {
content: " ";
display: table;
}
.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.footer-widgets:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.wrap:after {
clear: both;
content: " ";
display: table;
}
/* # Defaults
---------------------------------------------------------------------------------------------------- */
/* ## Typographical Elements
--------------------------------------------- */
body {
background-color: #f5f5f5;
color: #333;
font-family: Lato, sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 1.625;
margin: 0;
}
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
::-moz-selection {
background-color: #333;
color: #fff;
}
::selection {
background-color: #333;
color: #fff;
}
a {
color: #e5554e;
text-decoration: none;
}
a:hover {
color: #333;
}
p {
margin: 0 0 28px;
padding: 0;
}
ol,
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
b,
strong {
font-weight: 700;
}
blockquote,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 40px;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
/* ## Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
font-family: Lato, sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
/* ## Objects
--------------------------------------------- */
embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}
img {
height: auto;
}
.featured-content img,
.gallery img {
width: auto;
}
/* ## Gallery
--------------------------------------------- */
.gallery {
overflow: hidden;
}
.gallery-item {
float: left;
margin: 0 0 28px;
text-align: center;
}
.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery-columns-3 .gallery-item {
width: 33%;
}
.gallery-columns-4 .gallery-item {
width: 25%;
}
.gallery-columns-5 .gallery-item {
width: 20%;
}
.gallery-columns-6 .gallery-item {
width: 16.6666%;
}
.gallery-columns-7 .gallery-item {
width: 14.2857%;
}
.gallery-columns-8 .gallery-item {
width: 12.5%;
}
.gallery-columns-9 .gallery-item {
width: 11.1111%;
}
.gallery img {
border: 1px solid #ddd;
height: auto;
padding: 4px;
}
.gallery img:hover {
border: 1px solid #999;
}
/* ## Forms
--------------------------------------------- */
input,
select,
textarea {
background-color: #fff;
border: 1px solid #ddd;
color: #333;
font-size: 18px;
font-weight: 300;
padding: 16px;
width: 100%;
}
input:focus,
textarea:focus {
border: 1px solid #999;
outline: none;
}
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
width: auto;
}
::-moz-placeholder {
color: #333;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #333;
font-weight: 300;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
background-color: #333;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 300;
padding: 16px 24px;
text-transform: uppercase;
width: auto;
}
.footer-widgets button,
.footer-widgets input[type="button"],
.footer-widgets input[type="reset"],
.footer-widgets input[type="submit"],
.footer-widgets .button {
background-color: #e5554e;
color: #fff;
}
button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover {
background-color: #e5554e;
color: #fff;
}
.entry-content .button:hover {
color: #fff;
}
.footer-widgets button:hover,
.footer-widgets input:hover[type="button"],
.footer-widgets input:hover[type="reset"],
.footer-widgets input:hover[type="submit"],
.footer-widgets .button:hover {
background-color: #fff;
color: #333;
}
.button {
display: inline-block;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
display: none;
}
/* ## Tables
--------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
width: 100%;
}
tbody {
border-bottom: 1px solid #ddd;
}
td,
th {
text-align: left;
}
td {
border-top: 1px solid #ddd;
padding: 6px 0;
}
th {
font-weight: 400;
}
/* # Structure and Layout
---------------------------------------------------------------------------------------------------- */
/* ## Site Containers
--------------------------------------------- */
.site-inner,
.wrap {
margin: 0 auto;
max-width: 1200px;
}
.site-inner {
clear: both;
padding-top: 40px;
}
/* ## Column Widths and Positions
--------------------------------------------- */
/* ### Wrapping div for .content and .sidebar-primary */
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 980px;
}
.content-sidebar-sidebar .content-sidebar-wrap {
float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
float: right;
}
/* ### Content */
.content {
float: right;
width: 800px;
}
.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
float: left;
}
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
width: 580px;
}
.full-width-content .content {
width: 100%;
}
/* ### Primary Sidebar */
.sidebar-primary {
float: right;
width: 360px;
}
.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
float: left;
}
/* ### Secondary Sidebar */
.sidebar-secondary {
float: left;
width: 180px;
}
.content-sidebar-sidebar .sidebar-secondary {
float: right;
}
/* ## Column Classes
--------------------------------------------- */
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment