Skip to content

Instantly share code, notes, and snippets.

View mikestreety's full-sized avatar

Mike Street mikestreety

View GitHub Profile
@mikestreety
mikestreety / SassMeister-input-HTML.html
Created November 13, 2014 15:00
Generated by SassMeister.com.
<h1>What would you do if i sang out of tune?</h1>
@mikestreety
mikestreety / _mixins.scss
Created August 15, 2014 08:22
gulp-svg-sprite
$ieSprite: '.lt-ie9' !default;
$baseFontSize: 16px !default; // For em calc
// Strips units from any number
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// Converts px to ems
@mikestreety
mikestreety / _mixins.scss
Created August 4, 2014 10:30
SVG Sprite Set Up
// Strips units from any number
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// Converts px to ems
@function em($px, $base: 16px) {
@return (strip-units($px) / strip-units($base)) * 1em;
}
@mikestreety
mikestreety / content.json
Created June 6, 2014 13:16
Sass Newsletter
{
"title" : "Welcome to Issue #17",
"intro_text" : "This issue features fun, frolics and even more articles from Hugo!",
"featured" : [{
"image" : "http://s30.postimg.org/7j2cpmqr5/hero.jpg",
"link" : "http://geek-rocket.de/frontend-development/scss-styleguide-with-bem-oocss-smacss/",
"title" : "Scss-Styleguide with BEM, OOCSS & SMACSS",
"text" : "Here's another great walk through of a Sass-y document styleguide and folder system."
}],
"content" : [{
@mikestreety
mikestreety / gulpfle.js
Last active June 29, 2020 17:06
advance gulpfile
var gulp = require('gulp');
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});
var basePaths = {
public: './public/',
src: './src/assets/',
bower: './bower_components/'
@mikestreety
mikestreety / SassMeister-input-HTML.html
Created April 3, 2014 11:30
Generated by SassMeister.com.
<div class="list">HELLO</div>
<div class="sidebar">
<div class="list">HELLO</div>
</div>
@mikestreety
mikestreety / SassMeister-input-HTML.html
Created April 3, 2014 11:09
Generated by SassMeister.com.
<div class="list">HELLO</div>
<div class="sidebar">
<div class="list">HELLO</div>
</div>
.article {
padding: 10px;
h1 {
font-size: 24px;
color: #0046ad;
line-height: 1.4;
}
p {
font-size: 14px;
line-height: 1.4;
.article {
padding: 10px;
}
.article h1 {
font-size: 24px;
color: #0046ad;
line-height: 1.4;
}
// Define gulp before we start
var gulp = require('gulp');
// Define Sass and the autoprefixer
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
// This is an object which defines paths for the styles.
// Can add paths for javascript or images for example
// The folder, files to look for and destination are all required for sass