Skip to content

Instantly share code, notes, and snippets.

View jnowland's full-sized avatar

James Nowland jnowland

12 followers · 17 following
View GitHub Profile
@jnowland
jnowland / spacing.scss
Last active December 21, 2015 22:09
Spacing Class
// Generate inline class names for your elements
//
// <div class="actions u-inset-vert-S">
// <button type="submit">Totes click me!</button>
// </div>
$spacing-sizes: flush 0, XS 1, S 2, D 4, M 6, L 10 !default;
$spacing-base: 3px !default;
@function spacing($n) {
@jnowland
jnowland / bem-scss-mod.scss
Last active December 17, 2015 15:39
Just a though of a BEM Nesting idea. Would some SASS like compiler be able to do something like this? "__" and "--" are rather unique to it. I hate writing the same thing out over and over again.
.media{
__img{
--rev{
}
}
__body{
@jnowland
jnowland / nest-all.scss
Last active December 17, 2015 04:48 — forked from stowball/nest-all.scss
//Simple comment up here to explain that accordion is a accordion with 3 parts blah blah blah
.accordion {
.js & {
display: none;
}
.js .open + & {
display: block;
}
//dont use & unless it changes the order here.
li {
@jnowland
jnowland / posts-by-year.php
Created May 5, 2013 08:21
<?php /* making sure we 'orderby' correctly */
query_posts( $query_string . '&orderby=date&order=DEC' ); ?>
<?php if ( have_posts() ) : ?>
<?php
/* Setup */
$display_year = '';
$format = 'd/m/Y';
$year_position = 2;
@jnowland
jnowland / clearfix.sublime-snippet
Created March 14, 2013 05:59
Cleafix snippet
<snippet>
<content><![CDATA[@extend .clearfix;]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>cf</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
@jnowland
jnowland / lorempic.sublime-snippet
Created March 14, 2013 05:14
A snippet for getting filler pictures by lorempic + tab
<snippet>
<content><![CDATA[
<img src="http://lorempixel.com/${1:}/${2:}/${3:abstract / animals / business / cats / city / food / nightlife / fashion / people / nature / sports / technics / transport}/${4:Enter a Number 1 / 10}/" width="${1:}" height="${2:}" />
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>lorempic</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
@jnowland
jnowland / gist:5148661
Created March 13, 2013 01:26
Border box work around…
$padding: 20px;
$total-width:580px;
textarea {
width:100% - (percentage($padding / total-width)*2);
padding:0 percentage($padding / total-width);
}
@jnowland
jnowland / mediaquery.sublime-snippet
Created March 7, 2013 05:03
Sublime package that works with https://gist.github.com/jnowland/4712946
<snippet>
<content><![CDATA[
@include breakpoint(${1:massive / huge / larger / large / medium / small / extra-small}) {
${2:}
}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>mq</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
@jnowland
jnowland / troll.css
Created February 18, 2013 05:29
makes things amazing.
* {
background: pink;
font-family: cursive;
text-transform: uppercase;
letter-spacing: -5px;
}
*:hover {
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
@jnowland
jnowland / _mediaQueries.scss
Last active December 12, 2015 04:18
A file I have in my helpers that makes doing inline media queries pretty good :) extra-small, small, medium, large, larger, huge, massive
/* ==========================================================================
Media Queries:
How to get inline media querey
Order from small to big.
extra-small, small, medium, large, larger, huge, massive.
Should be noted when using min-width your styles outside any mediaqueries are the smallest and global.