Skip to content

Instantly share code, notes, and snippets.

View frontendbeast's full-sized avatar

Darren Jansson frontendbeast

View GitHub Profile
@frontendbeast
frontendbeast / gist:890ff27698f59cd5a4b4
Created May 13, 2014 12:29
SASS vertical rhythm background lines
$color__blue: #0CF;
$font__line-height: 1.5rem;
body {
background: linear-gradient(bottom, rgba($color__blue, 0.25), rgba($color__blue, 0.25) 1px, transparent 1px, transparent);
background-size: 1px $font__line-height;
background-repeat: repeat;
background-position: 0 0;
}
@frontendbeast
frontendbeast / gist:f86b4ef0837d6ed41e2c
Last active August 29, 2015 14:02
Quick realtime view of the current breakpoint
body:after {
content: 'XS';
@include respond-min($mq--sm) {
content: 'SM';
}
@include respond-min($mq--md) {
content: 'MD';
}
@frontendbeast
frontendbeast / grid.scss
Last active August 29, 2015 14:08
Sass grid column generator
// ========================================================================== \\
// About
// ========================================================================== \\
// The Sass below will generate a class for each of the columns required to
// fill your grid. For example, a four column grid requires columns with
// widths of 1/4, 1/2 and 3/4.
// |----| | | |
// |1/4 |
@mixin svg-content() {
background: url('something.svg');
}
@mixin svg($name, $position: false) {
@if ($position!=false) {
&:#{$position} {
@include svg-content;
}
} @else {
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active August 29, 2015 14:18
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Modified version of Harry Roberts' width mixin.
// https://github.com/csswizardry/discovr/blob/master/css/_trumps.widths.scss
// A mixin to spit out our width classes. Pass in the total number of columns
// we want to have, and an optional suffix for responsive widths. The widths are
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active August 29, 2015 14:21
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
.o-modal {
background-color: rgba(#000, 0.5);
color: rgba(white, 0.9);
}
@frontendbeast
frontendbeast / SassMeister-input.scss
Created May 12, 2015 12:45
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
p {
margin: 0;
& + & {
margin-bottom: 2rem;
@frontendbeast
frontendbeast / SassMeister-input.scss
Last active August 29, 2015 14:21
Generated by SassMeister.com.
// ----
// 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 14, 2015 13:20
Generated by SassMeister.com.
// ----
// 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 August 29, 2015 14:22
Generated by SassMeister.com.
// ----
// libsass (v3.2.4)
// ----
.c-nav {
position: relative;
&:before {
content: 'Menu';
display: inline-block;