Skip to content

Instantly share code, notes, and snippets.

View jnowland's full-sized avatar

James Nowland jnowland

View GitHub Profile
<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 / 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 / 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 / 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>
<?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;
//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 / 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 / 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 / count.js
Last active December 24, 2015 06:49
DISQUS comment count code uncompressed.
var DISQUSWIDGETS, disqus_domain, disqus_shortname;
typeof DISQUSWIDGETS == "undefined" && (DISQUSWIDGETS = function () {
var d = {}, m = document.getElementsByTagName("HEAD")[0] || document.body,
n = 0,
f = {}, j = {
identifier: 1,
url: 2,
slug: 3
};
d.domain = "disqus.com";
@jnowland
jnowland / Separator-1.scss
Last active December 31, 2015 16:48
Modifiers and BEM Question.
// method does not set a default.
.Separator{
}
.Separator--1{
border-style: dashed;
border-color: $colour--Neutral600;
border-width: 0 0 1px 0;
}