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 ...
Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Ma...
Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• How Sass can make your css Awesome!• Where to use Bootstrap• Rapid develo...
Amir Barylko MavenThought Inc.DISAPPOINTMENTMANAGEMENT• CSS & Markup• Intro to SASS (what’s wrong with CSS)• Bootstrap com...
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 rel...
Amir Barylko MavenThought Inc.CSS LIMITATIONS• Lots of repetition• No variables• Hard to maintain• Limited browser compati...
Amir Barylko MavenThought Inc.SASS“Sass is a meta-language on top of CSS that’sused to describe the style of a documentcle...
Amir Barylko MavenThought Inc.NESTING#navbar {width: 80%;height: 23px;ul { list-style-type: none; }li {float: left;a { fon...
Amir Barylko MavenThought Inc.PARENT REFERENCESa {color: #ce4dd6;&:hover { color: #ffb3ff; }&:visited { color: #c458cb; }}...
Amir Barylko MavenThought Inc.VARIABLES$main-color: #ce4dd6;$style: solid;#navbar {border-bottom: {color: $main-color;styl...
Amir Barylko MavenThought Inc.OPERATIONS & FUNCTIONS#navbar {$navbar-width: 800px;$items: 5;$navbar-color: #ce4dd6;width: ...
Amir Barylko MavenThought Inc.INTERPOLATION$vert: top;$horz: left;$radius: 10px;.rounded-#{$vert}-#{$horz} {border-#{$vert...
Amir Barylko MavenThought Inc.MIXINS@mixin rounded-top-left {$vert: top;$horz: left;$radius: 10px;border-#{$vert}-#{$horz}...
Amir Barylko MavenThought Inc.MIXINS II#navbar li {border-top-left-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-b...
Amir Barylko MavenThought Inc.ARGUMENTS@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radi...
Amir Barylko MavenThought Inc.ARGUMENTS II#navbar li {border-top-left-radius: 10px;-moz-border-radius-topleft: 10px;-webki...
Amir Barylko MavenThought Inc.IMPORT@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radius;...
Amir Barylko MavenThought Inc.IMPORT II#navbar li {border-top-left-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-b...
Amir Barylko MavenThought Inc.EXTEND.error {border: 1px #f00;background-color: #fdd;}.seriousError {@extend .error;border-...
Amir Barylko MavenThought Inc.TWITTER’SBOOTSTRAPCSS FrameworkGridComponentsMixinsResponsive UI
Amir Barylko MavenThought Inc.BOOTSTRAPBootstrap is a sleek, intuitive,and powerful front-endframework for faster and easi...
Amir Barylko MavenThought Inc.GRID• Grid with 12 columns• Use rows or fluid-rows• Columns use span?? classes• For example y...
Amir Barylko MavenThought Inc.LAYOUT• Fixed: Common fixed width using class• container• Fluid: Extends to the whole width u...
Amir Barylko MavenThought Inc.NAVBAR• Basic navigation bar with:• Brand• Links• Menus• Forms• Dropdowns• Can be static (sc...
Amir Barylko MavenThought Inc.BUTTONS• Basic button styles for button, anchor• Can be used as groups• Can be combined with...
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 co...
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• clea...
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• visi...
Amir Barylko MavenThought Inc.SUMMARY
Amir Barylko MavenThought Inc.BENEFITS• Grid & layout out of the box• Multiple components• Supports SASS• Cross browser co...
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/pre...
Upcoming SlideShare
Loading in...5
×

Sass & bootstrap

779

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sass & bootstrap

  1. 1. Amir Barylko MavenThought Inc.AMIR BARYLKOUNLEASH YOURCSS WITHSASS & BOOTSTRAP
  2. 2. Amir Barylko MavenThought Inc.INTROAbout meYour expectationsOverview
  3. 3. 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!
  4. 4. Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  5. 5. Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• How Sass can make your css Awesome!• Where to use Bootstrap• Rapid development & deployment•
  6. 6. Amir Barylko MavenThought Inc.DISAPPOINTMENTMANAGEMENT• CSS & Markup• Intro to SASS (what’s wrong with CSS)• Bootstrap components• Bootstrap Mixins
  7. 7. Amir Barylko MavenThought Inc.SASS INTROCSS goalsCSS limitationsSASS
  8. 8. 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
  9. 9. Amir Barylko MavenThought Inc.CSS LIMITATIONS• Lots of repetition• No variables• Hard to maintain• Limited browser compatibility
  10. 10. 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.”
  11. 11. 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; }
  12. 12. 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; }
  13. 13. 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; }
  14. 14. 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; }
  15. 15. 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; }
  16. 16. 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; }
  17. 17. 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; }
  18. 18. 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); }
  19. 19. 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; }
  20. 20. 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
  21. 21. 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; }
  22. 22. 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;}
  23. 23. Amir Barylko MavenThought Inc.TWITTER’SBOOTSTRAPCSS FrameworkGridComponentsMixinsResponsive UI
  24. 24. Amir Barylko MavenThought Inc.BOOTSTRAPBootstrap is a sleek, intuitive,and powerful front-endframework for faster and easierweb development
  25. 25. 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
  26. 26. Amir Barylko MavenThought Inc.LAYOUT• Fixed: Common fixed width using class• container• Fluid: Extends to the whole width using class• container-fluid
  27. 27. 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
  28. 28. 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
  29. 29. Amir Barylko MavenThought Inc.NAVS• Menu and content navigation• Tabs• Pills• Stackablestep 5
  30. 30. Amir Barylko MavenThought Inc.ALERTS• Notify messages to the user• Can be closed• Can hide automatically• Matches color codingstep 6
  31. 31. Amir Barylko MavenThought Inc.TOOLTIP• Easy tooltip to display on hover• Can be formattedstep 7
  32. 32. 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
  33. 33. Amir Barylko MavenThought Inc.MIXINS• border-radius• gradient-horizontal• gradient-vertical• buttonBackgroundstep 8
  34. 34. Amir Barylko MavenThought Inc.RESPONSIVE UI• Styles that help to show/hide based on your resolution• visible-desktop• visible-tablet• visible-phonestep 9
  35. 35. Amir Barylko MavenThought Inc.SUMMARY
  36. 36. Amir Barylko MavenThought Inc.BENEFITS• Grid & layout out of the box• Multiple components• Supports SASS• Cross browser compatibility• Responsive UI Support
  37. 37. Amir Barylko MavenThought Inc.DRAWBACKS• Learning Curve• Not 100% clean markup• Not flexible enough
  38. 38. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×