frontendbeast

linters:

    SelectorFormat:
        convention: ^(_)?[a-z]+-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]$
        convention_explanation: 'should be written in namespaced, hyphenated BEM format'
        ignored_types: [element]

frontendbeast

// ----
// 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

@mixin svg-content() {
	background: url('something.svg');
}

@mixin svg($name, $position: false) {
	@if ($position!=false) {
		&:#{$position} {
			@include svg-content;
		}
	} @else {

frontendbeast

// Instead of doing this
@mixin svg-after($name) {
    &:after {
        @include svg($name);
    }
}

@mixin svg-before($name) {
    &:before {
        @include svg($name);

frontendbeast

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

frontendbeast

// ========================================================================== \\
// 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 |

frontendbeast

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

frontendbeast

body:after {
	content: 'XS';

	@include respond-min($mq--sm) {
		content: 'SM';
	}

	@include respond-min($mq--md) {
		content: 'MD';
	}

frontendbeast

$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

watch: {
    assemble: {
        files: ['<%= app.app %>/*.html', '!<%= app.app %>/<%= app.templates %>/{,**/}*'],
        tasks: ['newer:assemble:server']
    },
    assemble_templates: {
        files: ['<%= app.app %>/<%= app.templates %>/{,**/}*.html', 'data.json'],
        tasks: ['assemble:server']
    },
    compass: {