Foundation 6 screencast

In notebook:
Article Notes
Created at:
2015-11-20
Updated:
2015-11-20
Tags:
css libraries
Screencast: Foundation 6 — Responsive Web Designgo from prototype to production

how to prototype as fast possible and then turn it into an efficient production site
  • file size reduced
  • accessibility support
  • starter project (static site generator)
new features added to the SASS

has become more of a hastle than it was worth 

  1. use sass and css smarter to save code
  2. and how to control the framework - solve how to use less of the framework  turning off a lot default
turning of components

in Foundation 5:
​@import 'foundation/components/grid';​ (don't comment it)
but then do 
​$include-grid-html-classes: false;​ 
so you bring back the semantic mode

in Foundation 6:
you import the entire framework, (​@import 'foundation';​) but it will not actually print any css yet.

then you use mixins​ to import elements like ​@include foundation-grid;​ or even use it in an element:
you toggle comment the ​@includes​  (​@include foundation-grid​) and use
​.sidebar { @include grid-col(3) }​ even if ​@include foundation-grid;​ is not commented out, your end css will only include the minimum for your ​.sidebar​ element

you can namespace the framework :

#foundation { @include foundation-everything;}​ 

you can start by uncommenting all the ​@i​ncludes​  

uses latest SASS version (3.4.x) so SASS maps work as well

Grids

mostly same the as Foundation 5, just extended to be more sass oriented

concept of row and column to be more semantic

en example of semantic grid (ie. not adding ​div​s like ​<div class="row">...​ and ​<div class="medium-4 columns">​ but using your own markup (​article​, ​header​ etc) and own css classes
  @charset 'utf-8';

@import 'foundation';

.main {
    @include grid-row;
}

.main-sidebar {
    @include grid-col;
    @include breakpoint(medium){
        @include grid-col(4);
    }
}

.main-content {
    @include grid-col;
    
    @include breakpoint(medium){
        @include grid-col(8);
    }
}
​to explain the above:
​.main-sidebar​ 12 columns on small 4 columns on medium

the media queries changed:
uses a mixins: if no number after ​grid-col​ it expands all the way 
​@include breakpoint​ creates a breakpoint for you and you can use named breakpoints (e.g. ​medium​) see
it can accept ranges as well this is valid:
​​​@include breakpoint(meduim only)​ or ​(medium up​) or ​(500px)​ or ​(landscape)​ ​(retina)​ ​(portrait)​ 

manipulaiton of rows and columns easier

change the definition of rows and columns 

  @charset 'utf-8';

@import 'foundation';

$grid-column-count: 16; // <- change the definition of column

.main {
    @include grid-col(4);
}

.sidebar {
    @include grid-col(12);
}

// now you can change the columns in the include

.main {
    @include grid-col(4 of 7);
}

.sidebar {
    @include grid-col(3 of 7);
}

// or use percentage values, etc.

.sidebar {
    @include grid-col(0.2);
    @include grid-col(44%);
}
use push and pull:
  .sidebar {
    @include grid-col(4);
    @include grid-pos(8);
}

// and

.sidebar {
    @include grid-col(4);
    @include grid-pos(-4);
}
create a single row that uses a 7 column layout
  @charset 'utf-8';

@import 'foundation';

.weird-row {
    @include grid-row(7) {
        .weird-column-1 {
            // here it's 3 of 7
            @include grid-col(3);
        }
        
        .weird-column-2 {
            @include grid-col(4);
        }
    }
}
responsive guttersconfiguration is more flexible:
  $breakpoints (
    small: 0,
    medium: 512px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px,
    kitten: 10000px
)

$breakppoint-classes: (small medium large xlarge);

$header-sizes: (
    small: (
        'h1': 24,
        'h2': 20,
        'h3': 19,
        // ...
    ),
    medium: (
        'h1': 48,
        'h2': 40,
        'h3': 31 
    )
);
in Foundation 6 you can add, remove, change breakpoints

pixel values are still converted to ​em​ because webkit still doesn't know what ​rem​ media query is
it's an outsdanding bug

the ​$breakpoints​ values can be sued in ​@include (<breakpoint-name>)​ 

​$breakpoint-classes​ <- it will apply to all components e.g. menubar etc. will only use this subset of breakpoints

header sizes: 

harmonius scale on mobile the largest sizes are smaller

responsive gutter:

  $grid-gutter-size: (
    small: 10px,
    medium: 12px,
    large: 15px,
    // ...
);
sass4 : scoping (global/local variables)

node-sass is 100x faster than ruby-sass