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

@use cssnext;

:root {
  --gotham: 'Gotham', 'Proxima Nova', 'Avenir Next', sans-serif;
  --break__sm: 32rem;
}

@custom-media --vp-sm (width >= var(--break__sm));

charliewilco

Tacoma.js Demo

A Pen by Charles Peters on CodePen.

License.