Sass & bootstrap
Upcoming SlideShare
Loading in...5
×
 

Sass & bootstrap

on

  • 1,026 views

 

Statistics

Views

Total Views
1,026
Views on SlideShare
1,026
Embed Views
0

Actions

Likes
1
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sass & bootstrap Sass & bootstrap Presentation Transcript

  • Amir Barylko MavenThought Inc.AMIR BARYLKOUNLEASH YOURCSS WITHSASS & BOOTSTRAP
  • Amir Barylko MavenThought Inc.INTROAbout meYour 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: amir@barylko.com• 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.DISAPPOINTMENTMANAGEMENT• CSS & Markup• Intro to SASS (what’s wrong with CSS)• Bootstrap components• Bootstrap Mixins
  • Amir Barylko MavenThought Inc.SASS INTROCSS goalsCSS 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’sused to describe the style of a documentcleanly and structurally, with more power thanflat CSS allows. Sass both provides a simpler,more elegant syntax for CSS and implementsvarious features that are useful for creatingmanageable 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 REFERENCESa {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’SBOOTSTRAPCSS FrameworkGridComponentsMixinsResponsive UI
  • Amir Barylko MavenThought Inc.BOOTSTRAPBootstrap is a sleek, intuitive,and powerful front-endframework for faster and easierweb 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 span9span3 span912 column gridstep 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 iconsstep 4
  • Amir Barylko MavenThought Inc.NAVS• Menu and content navigation• Tabs• Pills• Stackablestep 5
  • Amir Barylko MavenThought Inc.ALERTS• Notify messages to the user• Can be closed• Can hide automatically• Matches color codingstep 6
  • Amir Barylko MavenThought Inc.TOOLTIP• Easy tooltip to display on hover• Can be formattedstep 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• buttonBackgroundstep 8
  • Amir Barylko MavenThought Inc.RESPONSIVE UI• Styles that help to show/hide based on your resolution• visible-desktop• visible-tablet• visible-phonestep 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: amir@barylko.com, @abarylko• Download: http://www.orthocoders.com/presentations• http://twitter.github.io/bootstrap/• http://sass-lang.com/• http://lesscss.org/• Mindscape Workbench