Sass & bootstrap
-
Upload
amir-barylko -
Category
Technology
-
view
1.084 -
download
0
description
Transcript of Sass & bootstrap
Amir Barylko MavenThought Inc.
AMIR BARYLKO
UNLEASH YOURCSS WITH
SASS & BOOTSTRAP
Amir Barylko MavenThought Inc.
INTROAbout me
Your expectationsOverview
Amir Barylko MavenThought Inc.
WHO AM I?
• Software quality expert
• Architect
•Developer
•Mentor
• Great cook
• The one who’s entertaining you for the next hour!
Amir Barylko MavenThought Inc.
RESOURCES
• Email: [email protected]
• Twitter : @abarylko
• Blog: http://www.orthocoders.com
•Materials: http://www.orthocoders.com/presentations
Amir Barylko MavenThought Inc.
YOUR EXPECTATIONS
• How Sass can make your css Awesome!
•Where to use Bootstrap
• Rapid development & deployment
•
Amir Barylko MavenThought Inc.
DISAPPOINTMENT MANAGEMENT
• CSS & Markup
• Intro to SASS (what’s wrong with CSS)
• Bootstrap components
• Bootstrap Mixins
Amir Barylko MavenThought Inc.
SASS INTROCSS goals
CSS limitationsSASS
Amir Barylko MavenThought Inc.
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
Amir Barylko MavenThought Inc.
CSS LIMITATIONS
• Lots of repetition
•No variables
• Hard to maintain
• Limited browser compatibility
Amir Barylko MavenThought Inc.
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.”
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
PARENT REFERENCES
a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; }}
a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; }
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
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; }
Amir Barylko MavenThought Inc.
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); }
Amir Barylko MavenThought Inc.
ARGUMENTS II
#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
#footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
Amir Barylko MavenThought Inc.
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
Amir Barylko MavenThought Inc.
IMPORT II
#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
#footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
#sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
Amir Barylko MavenThought Inc.
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;}
Amir Barylko MavenThought Inc.
TWITTER’S BOOTSTRAP
CSS FrameworkGrid
ComponentsMixins
Responsive UI
Amir Barylko MavenThought Inc.
BOOTSTRAP
Bootstrap is a sleek, intuitive, and powerful front-end
framework for faster and easier web development
Amir Barylko MavenThought Inc.
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
Amir Barylko MavenThought Inc.
LAYOUT
• Fixed: Common fixed width using class
• container
• Fluid: Extends to the whole width using class
• container-fluid
Amir Barylko MavenThought Inc.
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
Amir Barylko MavenThought Inc.
BUTTONS
• Basic button styles for button, anchor
• Can be used as groups
• Can be combined with drop-downs
• Can use icons
step 4
Amir Barylko MavenThought Inc.
NAVS
•Menu and content navigation
• Tabs
• Pills
• Stackable
step 5
Amir Barylko MavenThought Inc.
ALERTS
•Notify messages to the user
• Can be closed
• Can hide automatically
•Matches color coding
step 6
Amir Barylko MavenThought Inc.
TOOLTIP
• Easy tooltip to display on hover
• Can be formatted
step 7
Amir Barylko MavenThought Inc.
USEFUL CLASSES
• pull-right: float right
• pull-left: float left
• hidden: hides the markup
• clearfix: removes float
•muted: changes the color
Amir Barylko MavenThought Inc.
MIXINS
• border-radius
• gradient-horizontal
• gradient-vertical
• buttonBackground
step 8
Amir Barylko MavenThought Inc.
RESPONSIVE UI
• Styles that help to show/hide based on your resolution
• visible-desktop
• visible-tablet
• visible-phone
step 9
Amir Barylko MavenThought Inc.
SUMMARY
Amir Barylko MavenThought Inc.
BENEFITS
• Grid & layout out of the box
•Multiple components
• Supports SASS
• Cross browser compatibility
• Responsive UI Support
Amir Barylko MavenThought Inc.
DRAWBACKS
• Learning Curve
•Not 100% clean markup
•Not flexible enough
Amir Barylko MavenThought Inc.
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