sass & bootstrap

Amir Barylko MavenThought Inc.

AMIR BARYLKO

UNLEASH YOURCSS WITH

SASS & BOOTSTRAP


INTROAbout me

Your expectationsOverview


WHO AM I?

• Software quality expert

• Architect

•Developer

•Mentor

• Great cook

• The one who’s entertaining you for the next hour!


RESOURCES

• Email: [email protected]

• 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 INTROCSS goals

CSS limitationsSASS


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 flat 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;

border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#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 { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }


ARGUMENTS

@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }#sidebar { @include rounded(top, left, 8px); }


ARGUMENTS II



#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }


IMPORT

@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius;}

@import "rounded";

#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }#sidebar { @include rounded(top, left, 8px); }

rounded.scss


IMPORT II



#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }


EXTEND

.error { border: 1px #f00; background-color: #fdd;}

.seriousError { @extend .error; border-width: 3px;}

.error { border: 1px #f00; background-color: #fdd;}

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


TWITTER’S BOOTSTRAP

CSS FrameworkGrid

ComponentsMixins

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 fluid-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 fixed width using class

• container

• Fluid: Extends to the whole width using class

• container-fluid


NAVBAR

• Basic navigation bar with:

• Brand

• Links

• Menus

• Forms

• Dropdowns

• Can be static (scrolls with page)

• Can be fixed 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 flexible enough


RESOURCES

• Contact me: [email protected], @abarylko

•Download: http://www.orthocoders.com/presentations

• http://twitter.github.io/bootstrap/

• http://sass-lang.com/

• http://lesscss.org/

•Mindscape Workbench

sass & bootstrap

Technology

amir barylko

navbar li

amirbarylko

navbar li

1px f00

navbar width

footer border

hover background