Skip to content

Instantly share code, notes, and snippets.

Avatar

Darren Jansson frontendbeast

View GitHub Profile
View gulpfile.js
gulp.src([ '**/*.scss' ])
.pipe( postcss([ autoprefixer({ browsers: '> 5% in my stats', stats: 'path/to/the/stats.json' }) ]) )
.pipe(gulp.dest())
View gist:0b2a0e6154f2bd45d560
var minifyCssOpts = {
advanced: false,
mediaMerging: false,
processImport: false,
roundingPrecision: 6
};
@frontendbeast
frontendbeast / Default (OSX).sublime-keymap
Last active Jul 16, 2019
Simple example of a key-mapped Sublime Text snippet (⌘+b for bold)
View Default (OSX).sublime-keymap
[
{ "keys": ["super+b"], "command": "insert_snippet", "args": {"name": "Packages/User/bold.sublime-snippet"} },
// Set context so shortcut works in HTML files only
{ "keys": ["super+b"], "command": "insert_snippet", "args": {"name": "Packages/User/bold.sublime-snippet"},"context":[{ "key": "selector", "operator": "equal", "operand": "text.html" }] }
]
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.4)
// ----
.c-nav {
$root: #{&};
position: relative;
&:before {
@frontendbeast
frontendbeast / SassMeister-input.scss
Created Jun 4, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.4)
// ----
$namespace: c-nav;
.#{$namespace} {
position: relative;
&:before {
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.4)
// ----
.c-nav {
position: relative;
&:before {
content: 'Menu';
display: inline-block;
@frontendbeast
frontendbeast / SassMeister-input.scss
Created May 14, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Sass breakpoints with contextual rem calculations
// ===================================================================
// I'm using rems, and most of my elements will use be relative to the
// base setting on the html element (e.g. p, ul, etc.), but some will
// have specific sizes, which I want to set in pixels but convert via
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
@function em_as_string($px-value) {
$size: $px-value/ 16px;
@return $size#{em};
}
@frontendbeast
frontendbeast / SassMeister-input.scss
Created May 12, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
p {
margin: 0;
& + & {
margin-bottom: 2rem;
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
.o-modal {
background-color: rgba(#000, 0.5);
color: rgba(white, 0.9);
}