Sass & bootstrap

Amir Barylko MavenThought Inc.
AMIR BARYLKO
UNLEASH YOUR
CSS WITH
SASS & BOOTSTRAP

INTRO
About me
Your expectations
Overview

WHO AM I?
• Software quality expert
• Architect
• Developer
• Mentor
• Great cook
• The one who’s entertaining you for the next hour!

RESOURCES
• Email: amir@barylko.com
• Twitter: @abarylko
• Blog: http://www.orthocoders.com
• Materials: http://www.orthocoders.com/presentations

YOUR EXPECTATIONS
• How Sass can make your css Awesome!
• Where to use Bootstrap
• Rapid development & deployment
•

DISAPPOINTMENT
MANAGEMENT
• CSS & Markup
• Intro to SASS (what’s wrong with CSS)
• Bootstrap components
• Bootstrap Mixins

SASS INTRO
CSS goals
CSS limitations
SASS

CSS
• Formatting versus markup
• Central place to control what your page looks like
• First release CSS11996, latest 1999 CSS3
• Standard for web design
• Increasing complexity

CSS LIMITATIONS
• Lots of repetition
• No variables
• Hard to maintain
• Limited browser compatibility

SASS
“Sass is a meta-language on top of CSS that’s
used to describe the style of a document
cleanly and structurally, with more power than
ﬂat CSS allows. Sass both provides a simpler,
more elegant syntax for CSS and implements
various features that are useful for creating
manageable stylesheets.”

NESTING
#navbar {
width: 80%;
height: 23px;
ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}
#navbar {
width: 80%;
height: 23px; }
#navbar ul {
list-style-type: none; }
#navbar li {
float: left; }
#navbar li a {
font-weight: bold; }

PARENT REFERENCES
a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}
a {
color: #ce4dd6; }
a:hover {
color: #ffb3ff; }
a:visited {
color: #c458cb; }

VARIABLES
$main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}
a {
color: $main-color;
&:hover { border-bottom:
$style 1px; }
}
#navbar {
border-bottom-color: #ce4dd6;
border-bottom-style: solid; }
a {
color: #ce4dd6; }
a:hover {
border-bottom: solid 1px; }

OPERATIONS & FUNCTIONS
#navbar {
$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;
width: $navbar-width;
border-bottom: 2px solid $navbar-color;
li {
float: left;
width: $navbar-width/$items - 10px;
background-color:
lighten($navbar-color, 20%);
&:hover {
background-color:
lighten($navbar-color, 10%);
}
}
}
#navbar {
width: 800px;
border-bottom: 2px solid #ce4dd6; }
#navbar li {
float: left;
width: 150px;
background-color: #e5a0e9; }
#navbar li:hover {
background-color: #d976e0; }

INTERPOLATION
$vert: top;
$horz: left;
$radius: 10px;
.rounded-#{$vert}-#{$horz} {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
.rounded-top-left {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }

MIXINS
@mixin rounded-top-left {
$vert: top;
$horz: left;
$radius: 10px;
}
#navbar li { @include rounded-top-left; }
#footer { @include rounded-top-left; }

MIXINS II
#navbar li {
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; }
#footer {

ARGUMENTS
@mixin rounded($vert, $horz, $radius: 10px) {
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
#sidebar { @include rounded(top, left, 8px); }

ARGUMENTS II
#navbar li {
#footer {
#sidebar {

IMPORT
@mixin rounded($vert, $horz, $radius: 10px) {
}
@import "rounded";
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
#sidebar { @include rounded(top, left, 8px); }
rounded.scss

IMPORT II
#navbar li {
#footer {
#sidebar {

EXTEND
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.error {
border: 1px #f00;
}
.seriousError {
border: 1px #f00;
border-width: 3px;
}

TWITTER’S
BOOTSTRAP
CSS Framework
Grid
Components
Mixins
Responsive UI

BOOTSTRAP
Bootstrap is a sleek, intuitive,
and powerful front-end
framework for faster and easier
web development

GRID
• Grid with 12 columns
• Use rows or ﬂuid-rows
• Columns use span?? classes
• For example you can create a
• Sidebar with span3
• And the content with span9
span3 span9
12 column grid
step 2

LAYOUT
• Fixed: Common ﬁxed width using class
• container
• Fluid: Extends to the whole width using class
• container-ﬂuid

NAVBAR
• Basic navigation bar with:
• Brand
• Links
• Menus
• Forms
• Dropdowns
• Can be static (scrolls with page)
• Can be ﬁxed top/bottom (does not scroll)
step 3

BUTTONS
• Basic button styles for button, anchor
• Can be used as groups
• Can be combined with drop-downs
• Can use icons
step 4

NAVS
• Menu and content navigation
• Tabs
• Pills
• Stackable
step 5

ALERTS
• Notify messages to the user
• Can be closed
• Can hide automatically
• Matches color coding
step 6

TOOLTIP
• Easy tooltip to display on hover
• Can be formatted
step 7

USEFUL CLASSES
• pull-right: float right
• pull-left: float left
• hidden: hides the markup
• clearfix: removes float
• muted: changes the color

MIXINS
• border-radius
• gradient-horizontal
• gradient-vertical
• buttonBackground
step 8

RESPONSIVE UI
• Styles that help to show/hide based on your resolution
• visible-desktop
• visible-tablet
• visible-phone
step 9

SUMMARY

BENEFITS
• Grid & layout out of the box
• Multiple components
• Supports SASS
• Cross browser compatibility
• Responsive UI Support

DRAWBACKS
• Learning Curve
• Not 100% clean markup
• Not ﬂexible enough

RESOURCES
• Contact me: amir@barylko.com, @abarylko
• Download: http://www.orthocoders.com/presentations
• http://twitter.github.io/bootstrap/
• http://sass-lang.com/
• http://lesscss.org/
• Mindscape Workbench

Sass & bootstrap

More Related Content

Viewers also liked (6)

Similar to Sass & bootstrap (20)

More from Amir Barylko (20)

Recently uploaded (20)

Sass & bootstrap