diff --git a/demo/index.html b/demo/index.html index 191b771..2d0e334 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,6 +9,9 @@ +
@@ -206,6 +209,10 @@

Helper Mixins

@include clear; +// clear(boolean) : Use false inside media queries to use mixin instead of placeholder + +@include clear(false); + // Ellipsis Mixin - ellipsis($width) // // display: inline-block; @@ -226,6 +233,10 @@

Helper Mixins

@include hide-text; +// hide-text(boolean) : Use false inside media queries to use mixin instead of placeholder + +@include hide-text(false); + // Inline List (use on <ul>) // // list-style-type:none; diff --git a/demo/styles/main.css b/demo/styles/main.css index a2bac01..f0f7389 100644 --- a/demo/styles/main.css +++ b/demo/styles/main.css @@ -1,3 +1,7 @@ +main:after, main section:after, main section header:after, main section .container:after { + content: ""; + display: table; + clear: both; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { @@ -8,12 +12,15 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq font: inherit; vertical-align: baseline; } -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } ol, ul { list-style: none; } +a { + text-decoration: none; } + blockquote, q { quotes: none; } @@ -133,26 +140,14 @@ main { width: 100%; max-width: 600px; margin: auto; } - main:after { - content: ""; - display: table; - clear: both; } main section { padding-left: 20px; padding-right: 20px; width: 100%; float: left; } - main section:after { - content: ""; - display: table; - clear: both; } main section header { margin: 0px 0px 20px 0px; text-align: center; } - main section header:after { - content: ""; - display: table; - clear: both; } main section header h2 { background: none; font-size: 1.5rem; @@ -170,10 +165,6 @@ main { width: 100%; max-width: 600px; margin-bottom: 20px; } - main section .container:after { - content: ""; - display: table; - clear: both; } main section .float-tile { padding-left: 20px; padding-right: 20px; diff --git a/docs/guff.html b/docs/guff.html index f6e13f2..6397102 100644 --- a/docs/guff.html +++ b/docs/guff.html @@ -94,7 +94,7 @@

Reset

  article, aside, details, figcaption, figure,
-  footer, header, hgroup, menu, nav, section {
+  footer, header, hgroup, main, menu, nav, section {
     display: block;
   }
@@ -124,6 +124,23 @@

Reset

+

Remove link underlining

+ + + + 
  a {
+    text-decoration: none;
+  }
+ + + + +
  • +
    + +
    + +

    Normalize block quotes

    @@ -135,11 +152,11 @@

    Reset

    • -
  • +
  • - +

    Remove pseudo elements

    @@ -154,11 +171,11 @@

    Reset

    • -
  • +
  • - +

    Normalize tables

    @@ -172,11 +189,11 @@

    Reset

    • -
  • +
  • - +

    Global border-box

    @@ -191,11 +208,11 @@

    Reset

    • -
  • +
  • - +

    Settings

    @@ -204,11 +221,11 @@

    Settings

    • -
  • +
  • - +

    Set base font size

    @@ -219,11 +236,11 @@

    Settings

    • -
  • +
  • - +

    Set line height ratio base

    @@ -234,11 +251,11 @@

    Settings

    • -
  • +
  • - +

    Vertical rhythm ratio

    @@ -249,11 +266,11 @@

    Settings

    • -
  • +
  • - +

    Desktop Media Query

    @@ -264,11 +281,11 @@

    Settings

    • -
  • +
  • - +

    Tablet Media Query

    @@ -279,11 +296,11 @@

    Settings

    • -
  • +
  • - +

    Mobile Media Query

    @@ -294,11 +311,11 @@

    Settings

    • -
  • +
  • - +

    Set Grid Column Count

    @@ -309,11 +326,11 @@

    Settings

    • -
  • +
  • - +

    Set Grid Gutter (as px)

    @@ -324,11 +341,11 @@

    Settings

    • -
  • +
  • - +

    Set Grid Padding (as px)

    @@ -339,11 +356,11 @@

    Settings

    • -
  • +
  • - +

    Set Grid Max Width (as px)

    @@ -354,11 +371,11 @@

    Settings

    • -
  • +
  • - +

    Functions

    @@ -367,11 +384,11 @@

    Functions

    • -
  • +
  • - +

    Strips unit suffix from value

    @@ -384,11 +401,11 @@

    Functions

    • -
  • +
  • - +

    Converts to rem, utility for rem-calc

    @@ -403,11 +420,11 @@

    Functions

    • -
  • +
  • - +

    Calculates rem value from number

    @@ -428,11 +445,11 @@

    Functions

    • -
  • +
  • - +

    Gets grid column width

    @@ -445,11 +462,11 @@

    Functions

    • -
  • +
  • - +

    Gets grid gutter

    @@ -462,11 +479,11 @@

    Functions

    • -
  • +
  • - +

    Mixins

    @@ -475,11 +492,11 @@

    Mixins

    • -
  • +
  • - +

    Sets container styles

    @@ -494,11 +511,11 @@

    Mixins

    • -
  • +
  • - +

    Sets col container styles

    @@ -524,11 +541,11 @@

    Mixins

    • -
  • +
  • - +

    Sets grid column width

    @@ -547,11 +564,11 @@

    Mixins

    • -
  • +
  • - +

    Sets grid column width (with gutter)

    @@ -569,11 +586,11 @@

    Mixins

    • -
  • +
  • - +

    Sets grid offet margin

    @@ -588,11 +605,11 @@

    Mixins

    • -
  • +
  • - +

    Wraps interior content in a media query

    @@ -607,11 +624,11 @@

    Mixins

    • -
  • +
  • - +

    Renders fully prefixed transistion

    @@ -624,11 +641,11 @@

    Mixins

    • -
  • +
  • - +

    Renders fully prefixed transform

    @@ -641,11 +658,11 @@

    Mixins

    • -
  • +
  • - +

    Renders fully prefixed box-sizing

    @@ -658,11 +675,11 @@

    Mixins

    • -
  • +
  • - +

    Utility for prefixing mixins

    @@ -678,11 +695,11 @@

    Mixins

    • -
  • +
  • - +

    Sets ellipsis overflow

    @@ -699,73 +716,81 @@

    Mixins

    • -
  • +
  • - +

    Clearfix include

    - 
    @mixin clear() {
-  &:after {
-  content:"";
-  display:table;
-  clear:both;
+            
    @mixin clear($extend: true) {
+  @if $extend {
+    @extend %clear;
+  }
+  @else {
+    #{'&'}:after {
+    content:"";
+    display:table;
+    clear:both;
+    }
   }
 }
    • -
  • +
  • - +

    Placeholder for clear

    - 
    %clear {
-  &:after {
+            
    %clear:after {
   content:"";
   display:table;
   clear:both;
-  }
 }
    • -
  • +
  • - +

    Text hider

    -@mixin hide-text() {
+@mixin hide-text($extend: true) {
+  @if $extend {
+    @extend %hide-text;
+  }
+  @else {
   overflow:hidden;
   text-indent: 100%;
   white-space: nowrap;
+  }
 }
    • -
  • +
  • - +

    Placeholder for hide-text

    @@ -780,11 +805,11 @@

    Mixins

    • -
  • +
  • - +

    Inline List

    @@ -809,11 +834,11 @@

    Mixins

    • -
  • +
  • - +

    Typography

    @@ -822,11 +847,11 @@

    Typography

    • -
  • +
  • - +

    Scale type at $type-rhythm-ratio

    @@ -842,11 +867,11 @@

    Typography

    • -
  • +
  • - +

    Typographic Rhythm Mixin

    @@ -859,11 +884,11 @@

    Typography

    • -
  • +
  • - +

    Set line-height

    @@ -881,11 +906,11 @@

    Typography

    • -
  • +
  • - +

    Set heading sizes to size variables

    diff --git a/guff.scss b/guff.scss index 1f5602e..f7c8af0 100644 --- a/guff.scss +++ b/guff.scss @@ -27,7 +27,7 @@ // Set HTML5 elements to block article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { + footer, header, hgroup, main, menu, nav, section { display: block; } @@ -36,6 +36,11 @@ list-style: none; } + // Remove link underlining + a { + text-decoration: none; + } + // Normalize block quotes blockquote, q { quotes: none; @@ -211,29 +216,37 @@ $grid-max-width: 1024px !default; } // Clearfix include -@mixin clear() { - &:after { - content:""; - display:table; - clear:both; +@mixin clear($extend: true) { + @if $extend { + @extend %clear; + } + @else { + #{'&'}:after { + content:""; + display:table; + clear:both; + } } } // Placeholder for clear -%clear { - &:after { +%clear:after { content:""; display:table; clear:both; - } } // Text hider -@mixin hide-text() { +@mixin hide-text($extend: true) { + @if $extend { + @extend %hide-text; + } + @else { overflow:hidden; text-indent: 100%; white-space: nowrap; + } } // Placeholder for hide-text diff --git a/src/_mixins.scss b/src/_mixins.scss index 442f0f7..73d4b66 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -91,29 +91,37 @@ } // Clearfix include -@mixin clear() { - &:after { - content:""; - display:table; - clear:both; +@mixin clear($extend: true) { + @if $extend { + @extend %clear; + } + @else { + #{'&'}:after { + content:""; + display:table; + clear:both; + } } } // Placeholder for clear -%clear { - &:after { +%clear:after { content:""; display:table; clear:both; - } } // Text hider -@mixin hide-text() { +@mixin hide-text($extend: true) { + @if $extend { + @extend %hide-text; + } + @else { overflow:hidden; text-indent: 100%; white-space: nowrap; + } } // Placeholder for hide-text diff --git a/src/_reset.scss b/src/_reset.scss index 3077a4b..e239816 100644 --- a/src/_reset.scss +++ b/src/_reset.scss @@ -27,7 +27,7 @@ // Set HTML5 elements to block article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { + footer, header, hgroup, main, menu, nav, section { display: block; } @@ -36,6 +36,11 @@ list-style: none; } + // Remove link underlining + a { + text-decoration: none; + } + // Normalize block quotes blockquote, q { quotes: none;