Scribd
Upload
58 views36 pages

Lets Get Sassy Compressed

This document discusses using the Foundation responsive front-end framework along with Sass to build responsive websites in an easier way. It provides an overview of Foundation, describing it as a responsive framework that is easy to use out of the box. It also summarizes Sass and why it is useful to use with Foundation, noting that Sass extends CSS with features from programming languages and helps manage CSS. The document then covers various Foundation and Sass topics at a high-level like the grid system, navigation, visibility classes, media queries, partials, nesting, variables, mixins and advanced Sass features.

Uploaded by

Thiago Monteiro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views36 pages

Lets Get Sassy Compressed

This document discusses using the Foundation responsive front-end framework along with Sass to build responsive websites in an easier way. It provides an overview of Foundation, describing it as a responsive framework that is easy to use out of the box. It also summarizes Sass and why it is useful to use with Foundation, noting that Sass extends CSS with features from programming languages and helps manage CSS. The document then covers various Foundation and Sass topics at a high-level like the grid system, navigation, visibility classes, media queries, partials, nesting, variables, mixins and advanced Sass features.

Uploaded by

Thiago Monteiro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Lets Get Sassy

Responsive Design with Foundation and Sass

Ali Gray
Web Designer, Portland Community College
@ iamaligray

BUT

HOW?

RESPONSIVE

WEBSITES
the
FUN
WAY

BUILDING A
RESPONSIVE FRAMEWORK

FROM SCRATCH
IS

YUCK

PLAIN CSS
IS A

PAIN IN THE ASS


SO LETS USE

Sass

Foundation:

Responsive out of the box

FOUNDATION.ZURB.COM

WHY USE Foundation?


Same frame, any website with
CSS/Sass

Effortless responsiveness

Plugins to copy/paste

Modular

Accessible

Doesnt require much testing if


done correctly

FOUNDATION FOR KITTENS


Responsive front-end
framework (HTML, CSS, JS)

Developed by ZURB, released in


2011

Open-source, built on Sass

Mobile-first philosophy

Great for prototyping

(Similar: Bootstrap, Skeleton)

FOUNDATION FOR KITTENS

FOUNDATION FOR CATS The Grid

FOUNDATION FOR CATS The Grid

FOUNDATION FOR CATS The Grid

FOUNDATION FOR TOMCATS The Grid


Offsets (move incomplete rows to the right)

Centered (center incomplete rows)

Source Ordering (rendered in different order than in code)

class=row collapse removes the padding between columns

CONFUSED?
TEMPLATES!
foundation.zurb.com/templates.html

FOUNDATION FOR CATS Navigation


Top-bar

Tons of features like buttons, dropdowns, search bars, stick-to-top

and Foundation offers 7 other types of responsive navigation menus

FOUNDATION FOR CATS Visibility


Show/hide by screen size

Orientation detection

Touch detection

Show/hide for screen readers

Skip links, .show-for-focus

Show/hide for print

FOUNDATION FOR CATS Media


Block grid

Slider

Lightbox, modal

Flex video

Sass = Syntactically
Awesome Style Sheets

SASS-LANG.COM

WHY USE

Sass?

SASS FOR KITTENS


Designed by Hampton Catlin in
2006

Coded in Ruby, open-source

Extends CSS to provide features


available in traditional
programming languages

.sass vs .scss

Scout app (no command line)

SassMeister

(Similar: CoffeeScript, LESS)

SASS FOR KITTENS


How Sass works

.SCSS / .SASS
SASS COMPILER
.CSS

SASS FOR CATS Partials


Folder structure
css

base
_colors.scss

_global.scss

_mixins.scss

_typography.scss
components
_callouts.scss

class-schedule.scss

_forms.scss

_tabs.scss
layout
_footer.scss

_header.scss

_media-queries.scss

_sidebar.scss

style.scss
@import base/colors, base/global,
base/mixins, base/typography;

@import components/callouts,
components/forms, components/tabs;

@import layout/footer, layout/header,


layout/media-queries, layout/sidebar;

SASS FOR CATS Nesting


Sass

Compiled CSS

SASS FOR CATS Variables


Sass

Compiled CSS

SASS FOR CATS Mixins


Sass

Compiled CSS

SASS FOR CATS Mixins


Sass

Compiled CSS

SASS FOR CATS Mixins


Sass

Compiled CSS

SASS FOR TOMCATS Advanced


Sass

Other Math Operations

Compiled CSS

SASS FOR TOMCATS Advanced


Expressions

Custom Functions

and much more check out sass-lang.com

Questions?
@ iamaligray

You might also like