finteractive/SASS-TO-05.md

## SASS-TO-05.md

      
    Raw
  

              SASS-TO-05.md
            
          
    SASS-TO SVG & SASS - March 2015

Introductions


What's your focus / work?
Do you use compass?
What’s Gem, Node Module, or other tool you found helpful recently.

Announcements


Looking for people to present
Next Meetup will likely be moving to Brighlane on King St.

Organizing SASS with SMACSS (Folders) and BEM naming conventions


Short Presentation

##Setup prerequisites##
http://www.meetup.com/SASS-Toronto/pages/Installing_the_Dev_stack_before_the_Meetup/

review problems people had

###Download the example files here###
http://bit.ly/sassto5-files
###Setup prerequisites###
Go into the /eq-demo folder and run
$ bower install
$ bundle install --path .vendor/bundle
sass/layouts._l-page.scss

Uses the breakpoint Mixin, Mobile First - Responsive Layout.
https://github.com/at-import/breakpoint
Add in the breakpoint $bp-lrg styles.
components/summary.scss

Unhide the kittens!
Review the summary component
Note the extend of the %btn for the .summary_link class
That’s some huge friggin kittens!
Element Queries vs Media Queries

http://snugug.com/musings/element-queries
https://github.com/Snugug/eq.js
Width only breakpoints (not a cascade like min-width media queries)
2 variations - The data attribute and the SCSS version, but we’re using data attributes as it’s faster.
Inspect the main element as it gets resized. We define the “breakpoints” with the data-eq-pts, eq.js selects the current condition as data-eq-state which we use to style
data-eq-pts="2col: 500, 3col: 600"

data-eq-state="2col"

sass/style.scss

Uncomment _l-eq.scss
sass/layouts/_l-eq.scss

Controls the layout for components inside the container.
Change the ratios of the aside and main content areas in the _l-page.scss and we never have to worry about it.
Quick Demo of Replacing Compass

Use Bower Instead of Gems (as the gems install compass as a dependency)
Autoprefixer replaces compass functions###

https://github.com/sindresorhus/gulp-autoprefixer
No more PNG sprintes, as IE9 supports SVG###

https://github.com/jkphl/gulp-svg-sprite
gulp svg


minifies the /svg-src (inlcude /svg-src/sprites) and copies to /svg & /svg/sprites
Converts all the SVG’s in /svg/sprites into symbols and exports it to /svg/sprites.svg

To use these it’s basically the same as images…
<svg class="facebook" >
   <use xlink:href="./svg/sprites.svg#facebook"></use>
</svg>

https://css-tricks.com/cascading-svg-fill-color/
https://css-tricks.com/svg-use-external-source/
https://github.com/jonathantneal/svg4everybody
###Vertical Rhythm & Tyopgraphy with REM units###