Skip to content

Instantly share code, notes, and snippets.

View conwayeast's full-sized avatar

Ryan conwayeast

7 followers · 11 following
View GitHub Profile
@conwayeast
conwayeast / functions.php
Created July 21, 2015 02:19 — forked from jennimckinnon/functions.php
Adding google fonts to WordPress
function google_fonts() {
$query_args = array(
'family' => 'Open+Sans:400,700|Oswald:700'
'subset' => 'latin,latin-ext',
);
wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
}
add_action('wp_enqueue_scripts', 'google_fonts');
@conwayeast
conwayeast / SassMeister-input-HTML.html
Created May 27, 2015 13:02
Responsive Typography with Sass - James Steinbach
<h1 class="hero-title">Primary Title</h1>
<div class="entry-content">
<p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h1>Content Title</h1>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus.</p>
<h2>Content Subtitle</h2>
<p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam vene
@conwayeast
conwayeast / * { Box-sizing: Border-box }
Created May 15, 2015 13:59
Instead of calculating width by including padding and border, the box-sizing property in combination with the border-box value uses the width property as the actual rendered width.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@conwayeast
conwayeast / position: absolute
Created May 15, 2015 13:54
Absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling.
/* Assuming this HTML structure:
<div class="relative">
<p>This element is relatively-positioned. If this element was <code>position: static;</code> its absolutely-positioned child would escape and would be positioned relative to the document body.</p>
<div class="absolute">
<p>This element is absolutely-positioned. It's positioned relative to its parent.</p>
</div> <!-- .absolute -->
@conwayeast
conwayeast / floats
Last active August 29, 2015 14:21
Clearing CSS floats
/* Assuming this HTML structure:
<div class="clearfix">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div> <!-- .clearfix -->
*/
@conwayeast
conwayeast / dabblet.css
Created April 30, 2014 14:57
linear gradient
/**
* linear gradient
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;