charliewilco

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                src: ['js/lib/*.js', 'js/global.js'],
                //input
                dest: 'js/build/global.min.js' //output
            }

charliewilco

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    connect = require('gulp-connect');

gulp.task('scripts', function(){
    gulp.src('js/*.js')
        .pipe(plumber())

charliewilco

  $('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('tabs--active');

charliewilco

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.0)
// ----

$ends: 3,4,6,8,12;
$gutterSize: 2%;
@each $end in $ends {
  @for $i from 1 through $end {
    $single--column: (100 - (($end - 1)*$gutterSize )) / $end;

charliewilco

<div class="block">
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">
      <p>Other stuff you might need to know</p>  
    </div>
  </div>
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">

charliewilco

.color {
  &--fill {
    border-radius: .5rem;
    width: 8.5rem;
    height: 3rem;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 0;

charliewilco

// ----
// libsass (v3.1.0-beta)
// ----

$dirs: left, right, center;
@each $dir in $dirs {
	.#{$dir} { text-align: #{$dir}; }
}

charliewilco

.caps { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.tt-none { text-transform: none; }

$dirs: left, right, center;
@each $dir in $dirs {
	.align-#{$dir} { text-align: #{$dir}; }
}

$ws: 300, 400, 700;

charliewilco

// ----
// libsass (v3.1.0)
// ----

$ends: 4, 6, 8, 12;
$gutterSize: 2%;
@each $end in $ends {
  @for $i from 1 through $end {
    $single--column: (100 - (($end - 1)*$gutterSize )) / $end;
    .col-#{$i}-#{$end} {

charliewilco

Writing Maintainable CSS

Writing CSS is easy. It has a really low barrier to entry with simple declarative syntax combined with its results being (for the most part), visual. Authoring CSS is simple, it doesn’t need to be compiled to be interpreted by a browser. It’s an easy target for being dismissed because of misunderstanding the properties and values have assumed meanings (like float or inline-block or positioning entirely).

Now writing good CSS is a completely different animal. While authorship is simple and we face a whole host of challenges in order to reach our users. Chief among them is maintaining a consistent visual style across components while writing performant front-end code. To make this even more difficult we can draw very few concrete conclusions about users as our landscape of even-increasing devices expands and never knowing the type of connection speed a user will have at a given time. All this leads to a high level of complexity within our projects’ front-end code.

Quite a few meth