Lets Get Sassy Compressed
Lets Get Sassy Compressed
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
Sass
Foundation:
FOUNDATION.ZURB.COM
Effortless responsiveness
Plugins to copy/paste
Modular
Accessible
Mobile-first philosophy
CONFUSED?
TEMPLATES!
foundation.zurb.com/templates.html
Orientation detection
Touch detection
Slider
Lightbox, modal
Flex video
Sass = Syntactically
Awesome Style Sheets
SASS-LANG.COM
WHY USE
Sass?
.sass vs .scss
SassMeister
.SCSS / .SASS
SASS COMPILER
.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;
Compiled CSS
Compiled CSS
Compiled CSS
Compiled CSS
Compiled CSS
Compiled CSS
Custom Functions
Questions?
@ iamaligray