raahede

<div class="body">
  <div class="parent">
    <div class="first child">First</div>
    <div class="second child">
      <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>

raahede

<a href="/" class="button" title="Text on mobile">Text on desktop</a>

raahede

- [ ] **FILES**: I have looked through `Files changed` for general errors
- [ ] **SCSS**: I have looked through my SCSS for general style guide consistency
- [ ] **SCSS**: I haven't committed any out-commented styles unless it has explicit comment regarding how it will be used later
- [ ] **JS**: I haven't committed any `console.log`s
- [ ] **JS**: All my custom functions have a leading comment explaining its purpose
- [ ] **JS**: I haven't committed any out-commented code unless it has explicit comment regarding how it will be used later

raahede

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$font-base-size-px: 16px;
$bp-m-l: 481px; // Breakpoint medium
$bp-l-xl: 769px; // Breakpoint large

// Rem mixin with pixel fallback

raahede

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$breakpoints: 481px, 769px;

@mixin using($arg){
  content:"#{$arg}";
}

raahede

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$font-base-size-px: 16px;
$bp-m-l: 481px; // Breakpoint medium
$bp-l-xl: 769px; // Breakpoint large

$font-size-breakpoints: $bp-m-l, $bp-l-xl;

raahede

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$my-default: "first" !default;
$my-default: "second" !default;

.output {
  content: "#{$my-default}";

raahede

// Configurable variables
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// Absolute height of body text, in pixels
$base-font-size: 16px !default;

// Absolute height of one line of type, in pixels
$base-line-height: 24px !default;

// The font unit to use when returning values in rhythm functions

raahede

<section>
  <div class="container">
    <div class="col">
      <p>1 Nullam mattis nisl sit amet feugiat vulputate. Duis et tincidunt mi. Curabitur condimentum eget purus non porttitor. Maecenas sed lacus eu nisl vulputate tristique ut non dolor. In imperdiet felis et ex tincidunt lacinia. Proin sem massa, faucibus vel nulla eget, interdum scelerisque nibh.</p>
    </div>
    <div class="col">
      <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet est vitae lacus lacinia rhoncus. Ut imperdiet varius tellus, eu pharetra orci vulputate non.</p>
    </div>
    <hr class="splitter">
    <div class="col">

raahede

require "susy"
require "breakpoint"
css_dir = "."
sass_dir = "."