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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,084
On Slideshare
1,084
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Amir Barylko MavenThought Inc.AMIR BARYLKOUNLEASH YOURCSS WITHSASS & BOOTSTRAP
  • 2. Amir Barylko MavenThought Inc.INTROAbout meYour expectationsOverview
  • 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. Amir Barylko MavenThought Inc.RESOURCES• Email: amir@barylko.com• Twitter: @abarylko• Blog: http://www.orthocoders.com• Materials: http://www.orthocoders.com/presentations
  • 5. Amir Barylko MavenThought Inc.YOUR EXPECTATIONS• How Sass can make your css Awesome!• Where to use Bootstrap• Rapid development & deployment•
  • 6. Amir Barylko MavenThought Inc.DISAPPOINTMENTMANAGEMENT• CSS & Markup• Intro to SASS (what’s wrong with CSS)• Bootstrap components• Bootstrap Mixins
  • 7. Amir Barylko MavenThought Inc.SASS INTROCSS goalsCSS limitationsSASS
  • 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. Amir Barylko MavenThought Inc.CSS LIMITATIONS• Lots of repetition• No variables• Hard to maintain• Limited browser compatibility
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Amir Barylko MavenThought Inc.TWITTER’SBOOTSTRAPCSS FrameworkGridComponentsMixinsResponsive UI
  • 24. Amir Barylko MavenThought Inc.BOOTSTRAPBootstrap is a sleek, intuitive,and powerful front-endframework for faster and easierweb development
  • 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. Amir Barylko MavenThought Inc.LAYOUT• Fixed: Common fixed width using class• container• Fluid: Extends to the whole width using class• container-fluid
  • 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. 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. Amir Barylko MavenThought Inc.NAVS• Menu and content navigation• Tabs• Pills• Stackablestep 5
  • 30. Amir Barylko MavenThought Inc.ALERTS• Notify messages to the user• Can be closed• Can hide automatically• Matches color codingstep 6
  • 31. Amir Barylko MavenThought Inc.TOOLTIP• Easy tooltip to display on hover• Can be formattedstep 7
  • 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. Amir Barylko MavenThought Inc.MIXINS• border-radius• gradient-horizontal• gradient-vertical• buttonBackgroundstep 8
  • 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. Amir Barylko MavenThought Inc.SUMMARY
  • 36. Amir Barylko MavenThought Inc.BENEFITS• Grid & layout out of the box• Multiple components• Supports SASS• Cross browser compatibility• Responsive UI Support
  • 37. Amir Barylko MavenThought Inc.DRAWBACKS• Learning Curve• Not 100% clean markup• Not flexible enough
  • 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