class2.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Class 2 (Sass, Girl Develop It)</title>
		<meta name="description" content="This is the official Girl Develop It Intro to Sass course. Materials by Catherine Farman.
    The course is meant to be taught in 2 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience.">
		<meta name="author" content="Girl Develop It">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<link rel="stylesheet" href="reveal.js/css/reveal.css">
		<link rel="stylesheet" href="reveal.js/css/theme/gdilight.css" id="theme">
		<!-- For syntax highlighting -->
		<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
		<!-- dark editor--><link rel="stylesheet" href="reveal.js/lib/css/dark.css">
    <!-- For the slides -->
    <!-- <link rel="stylesheet" href="css/slides.css"> -->
		<!-- If use the PDF print sheet so students can print slides-->
		<link rel="stylesheet" href="reveal.js/css/print/pdf.css" type="text/css" media="print">
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>
  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <!-- Opening slide -->
        <section>
          <img src = "images/gdi_logo_badge.png" class="badge">
          <h3>Intro to Sass</h3>
          <h4>Part II</h4>
        </section>

        <!-- Opening slide -->
        <section>
          <h3>Download Class 2 Files:</h3>
          <a class="blue" href="https://gdi-nyc.github.io/intro-to-sass/sass-class-files.zip" target="_blank">Intro to Sass Class Files</a>
        </section>

        <!-- Advanced mixins: Multiple arguments -->
        <section>
          <h3>Multiple Arguments</h3>
          <div class="left-align">
<pre><code contenteditable class="sass css">@mixin gradient($color1, $color2) {
  background-image: linear-gradient($color1, $color2, $color1);
}</code></pre>
          </div>
        </section>

        <!-- Advanced mixins: Default values -->
        <section>
          <h3>Default Arguments</h3>
          <div class="left-align">
            <pre><code contenteditable class="sass css">@mixin gradient($color1: #fff, $color2: #666) {
  background-image: linear-gradient($color1, $color2, $color1);
}</code></pre>
          </div>
        </section>

        <!-- Advanced mixins -->
        <section>
          <h3>Interpolation</h3>
          <div class="left-align">
<pre><code contenteditable class="sass css">@mixin rotate($degree, $position) {
  transform: rotate(#{$degree}deg);
  transform-origin: $position;
}</code></pre>
<pre><code contenteditable class="sass css">$type: 'large';

.button--#{$type} {
  height: 100px;
  }</code></pre>
<pre><code contenteditable class="sass css">$sidebar-width: 250px;

.main-content {
  width: calc(100% - #{$sidebar-width});
  }</code></pre>
        </div>
      </section>

        <!-- @extend -->
      <section>
        <h3>@extend</h3>
        <div class="left-align">
<pre><code contenteditable class="sass css">%headline {
  font-size: 2em;
  font-weight: bold;
}
.lead-story-headline {
  @extend %headline;
  text-decoration: underline;
  text-transform: uppercase;
}</code></pre>
        </div>
      </section>

        <!-- Exercise 1: Advanced Mixins -->
      <section>
        <h3>Let's Develop It</h3>
        <ul>
          <li>Create new mixins using the following:
            <ul>
              <li>Multiple arguments</li>
              <li>Default arguments</li>
              <li>Interpolation</li>
              <li>@extend to include common styles</li>
            </ul>
          </li>
          <li>Use these mix-ins in your styles.scss file</li>
          <li>Compile to CSS and refresh your index page to see your changes</li>
        </ul>
      </section>

  <!-- Advanced mixins: UI development mixins -->
      <section>
        <h3>Sprites</h3>
        <div class="left-align">
          <p>Sprite image:</p>
          <a target="_blank" href="images/youtube_sprite.png"><img src="images/youtube_sprite.png"></a>
          <p>CSS for icon:</p>
<pre><code contenteditable class ="sass css">.icon {
display: block;
background: no-repeat url(images/youtube_sprite.png) -395px -114px;
background-size: auto;
width: 18px;
height: 18px; }</code></pre>
        </div>
      </section>

        <!-- Advanced mixins: UI development mixins -->
        <section>
          <h3>Sprite Mixins</h3>
          <div class="left-align">
            <p>If you <a target="_blank" href="http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/">set up your Photoshop sprite to use grid lines</a>, you can use Sass to easily position your <a target="_blank" href="images/sprite.png">sprite image</a> without lots of trial and error.</p>
<pre><code contenteditable class ="sass css">@mixin sprite-position($x:0, $y:0) {
  $gridSize:  -32px;
  $offsetX:   $x * $gridSize;
  $offsetY:   $y * $gridSize;
  background-position: $offsetX $offsetY;
}
@mixin sprite-image($file, $x:0, $y:0) {
  background-image: url("../../images/icons/#{$file}");
  @include sprite-position($x, $y);
}</code></pre>
          </div>
        </section>

        <!-- Media Queries -->
        <section>
          <h3>Media Queries</h3>
          <div class="left-align">
            <p>@media blocks do not need to be declared at the root level of the stylesheet, which helps keep them in sync with the elements they're modifying.</p>
<pre><code contenteditable class ="sass css">body {
  article {
    p {
      font-size: 100%;
      color: black;
      padding: 10px;

      @media (max-width: 768px) {
        font-size: 150%; // use larger text for smaller screens
      }
    }
  }
}</code></pre>
          </div>
        </section>

        <!-- Media Queries -->
        <section>
          <h3>Media Queries</h3>
          <div class="left-align">
            <p>Compiled CSS:</p>
<pre><code contenteditable class ="sass css">body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}</code></pre>
          </div>
        </section>

<!-- Exercise 2: Icons and Media Queries -->
<section>
  <h3>Let's Develop It</h3>
  <ul>
    <li>Add icons and media queries:
      <ul>
        <li>Add icons to the footer or header</li>
        <li>Change the styles to fit different screen sizes</li>
      </ul>
    </li>
    <li>Add these new styles to your styles.scss file</li>
    <li>Compile to CSS and refresh your index page to see your changes</li>
  </ul>
</section>

        <!-- BREAK before Part 2 -->
        <section>
          <h3>Break Time!</h3>
          <div>
            <p>Stand up and stretch - we'll resume in 5 minutes</p>
            <img src="images/stretchbreak.jpg">
          </div>
        </section>

        <!-- Advanced mixins: If/Else logic -->
        <section>
          <h3>Conditionals</h3>
          <div class="left-align">
            <p><span class="pink">@if</span>, <span class="pink">@else if</span>, and <span class="pink">@else</span></p>
            <pre style="width: 850px"><code contenteditable class ="sass css">@mixin opacity($value: 0.5) {
  @if $value == transparent {
    opacity: 0;
  } @else if $value == opaque {
    opacity: 1;
  } @else {
    opacity: $value;
  }
}
@include opacity(transparent);
</code></pre>
        </div>
        </section>

        <!-- Exercise 6: Loops -->
        <section>
          <h3>For Loops</h3>
          <div class = "left-align">
            <p class="left-align">Sass code:</p>
<pre><code class ="php">@for $i from 1 through 3 {
  .column-#{$i} { width: 2em * $i; }
}
</code></pre>
            <p class="left-align">CSS output:</p>
            <pre><code contenteditable class ="sass css">.column-1 {
  width: 2em;
}
.column-2 {
  width: 4em;
}
.column-3 {
  width: 6em;
}</code></pre>
          </div>
        </section>

        <!-- Exercise 6: Loops -->
        <section>
          <h3>Let's Develop It</h3>
          <div class = "left-align">
          <ul>
            <li>Use loops to make columns that fit within the layout or add links to the footer nav.</li>
            <li>Experiment with math in your loop's styles - change the width, padding, and even the font-size</li>
          </ul>
<pre><code class ="php">@for $i from 1 through 3 {
  .column-#{$i} { width: 2em * $i; }
}
</code></pre>
          </div>
        </section>

        <!-- Looping with @Each -->
        <section>
          <h3>@each</h3>
          <div class = "left-align">
            <p>Loops through a list of items and creates styles for each item in the list</p>
            <p class="left-align">Sass code:</p>
<pre><code class ="php">@each $icon in youtube, twitter, facebook {
  .icon-$icon {
    background-image: url('#{$icon}.png');
  }
}
</code></pre>
            <p class="left-align">CSS output:</p>
            <pre><code contenteditable class ="sass css">.icon-youtube {
  background: url('youtube.png');
}
.icon-twitter {
  background: url('twitter.png');
}
.icon-facebook {
  background: url('facebook.png');
}</code></pre>
          </div>
        </section>


        <!-- Exercise 7: Loops -->
        <section>
          <h3>Let's Develop It</h3>
          <div class = "left-align">
            <ul>
              <li>Create background image styles for each article</li>
              <li>Try <a href="https://www.toptal.com/designers/subtlepatterns/">Subtle Patterns</a> for images to use</li>
              <li>Write these background styles with <span class="pink">@each</span> and a list</li>
              <li>Bonus: style the social media icons using <span class="pink">@each</span> and <span class="pink">@if</span> logic</li>
            </ul>
<pre><code class ="php">@each $woman in ada, grace, frances, barbara, anita, maria {
  .#{$woman}-bg {
    background-image: url('images/#{$woman}.png');
  }
}</code></pre>
          </div>
        </section>

        <!-- Exercise 7: Functions -->
        <section>
          <h3>Advanced Functions</h3>
          <div class = "left-align">
            <ul>
              <li>This is an example of the <span class="pink">index()</span> function, but there are many other functions you can use.</li>
              <li><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html">Sass function documentation</a> </li>
            </ul>
<pre><code class ="php">$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;

.user-tooltip {
  z-index: index($elements, user-tooltip);
} </code></pre>
          </div>
        </section>

        <!-- Exercise 7: Functions -->
        <section>
          <h3>Advanced Functions</h3>
          <div class = "left-align">
            <p>This is an even more advanced example combining a custom function, lists, variables, and error handling.</p>
<pre><code class ="php">@function z($list, $element) {

  $z-index: index($list, $element);

  @if $z-index {
  @return $z-index;
  }

  @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
  @return null;
} </code></pre>
          </div>
        </section>
        <section>
          <h3>Additional Resources</h2>
            <a href="https://github.com/erindepew/resources-for-beginning-web-developers/blob/master/README.md">(very) unofficial list of resources for beginner web developers</a>
        </section>
        <section>
            <h2>Questions?</h2>
        </section>
        <section>
            <h3>We Want to Hear from You!</h3>
            <a href="http://bit.ly/GDI-NYC">Feedback Survey</a>
        </section>
      </div>
      <footer>
        <div class="copyright">
          Sass ~ Girl Develop It ~
          <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
        </div>
      </footer>
    </div>

    <script src="reveal.js/lib/js/head.min.js"></script>
    <script src="reveal.js/js/reveal.min.js"></script>
    <script>
      // Full list of configuration options available here:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
        transition: Reveal.getQueryHash().transition || 'none', // default/cube/page/concave/zoom/linear/none
        // Optional libraries used to extend on reveal.js
        dependencies: [
          { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'reveal.js/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
          { src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
      });
    </script>
  </body>
</html>