tortillaj

# Default settings for Gulp.
# Dopy this file and rename it to gulpfile.yml for use in your website,
# then, ignore the gulpfile.yml in Git. That way you can have
# individualized settings within a team.

tortillaj

(function() {
  if (!Array.prototype.flatten) {
    Array.prototype.flatten = function(array) {
      'use strict';
      
      // check if called on null object
      if (this == null) {
        throw new TypeError('Array.prototype.flatten must not be called on a null or undefined object.');
      }
      

tortillaj

[ Launch: Tributary inlet ] d96fa350b500788b017d7565ffdde286 by tortillaj

tortillaj

[ Launch: Probo metrics viz ] b3aa98f63f275d735ceee74ec5ddf7e8 by tortillaj

tortillaj

[ Launch: sin waves ] 53ded0c8b831be4c8e7c7b0281a1e89e by tortillaj See Previous Inlet [ Gist ]

tortillaj

<h1>Mixins</h1>
<p>Mixins are very useful when you have many elements that have the same basic styles, but with a few differences.</p>
<p>Some examples are buttons. Maybe sometimes a button is blue, other times there are green buttons, and other times the button is transparent.</p>
<p>A mixin is a kind of function that will let you feed it parameters to make these minor changes to common styles.</p>
<p>The @mixin directive let's you declare (define) a mixin.</p>
<p>The @include directive let's you use a mixin.</p>

<p class="button">Read More</p>
<a class="button-red">Important!</a>

tortillaj

<p>A "placeholder" class does not print out the class itself. It is useful when you have CSS properties that don't apply to any specific element in the HTML, but will be used in many places on elements with different selectors.</p>

<p class="something-else">Read More</p>

<p>Try overriding a propery in the .something-else class after the @extend directive.</p>

tortillaj

<p class="button">Button</p>

<p>Somtimes you don't have control over the CSS class. In that case, you can "extend" a previously made class.</p>

<p class="something-else">Read More</p>

<p>Try overriding a propery in the .something-else class after the @extend directive.</p>

tortillaj

<div class="container">
  <h1>Nesting with the Ampersand Operator</h1>
  <a href="#">It's common to use & on link styles.</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p class="container__note">Here is a different kind of ampersand usage.</p>
</div>

tortillaj

<div>
  <h1>Nesting classes and elements</h1>
  <p>Elements and classes can be nested. Here we nested a paragraph tag. <a href="#">Links can be nested too.</a></p>
  <p class="highlighted-text">Classes can be nested too!</p>
</div>