This document discusses using Sass and Bootstrap to improve CSS development. It introduces Sass features like nesting, variables, operations and functions that help avoid repetition and make CSS more maintainable. Bootstrap is presented as a framework that provides pre-built CSS components, a grid system, and mixins to support responsive design. The benefits of both tools are rapid development and cross-browser compatibility, though Bootstrap has a learning curve and may not be fully flexible. Resources are provided to learn more.

1. Amir Barylko MavenThought Inc.
AMIR BARYLKO
UNLEASH YOUR
CSS WITH
SASS & BOOTSTRAP

2. Amir Barylko MavenThought Inc.
INTRO
About me
Your expectations
Overview

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.
DISAPPOINTMENT
MANAGEMENT
• CSS & Markup
• Intro to SASS (what’s wrong with CSS)
• Bootstrap components
• Bootstrap Mixins

7. Amir Barylko MavenThought Inc.
SASS INTRO
CSS goals
CSS limitations
SASS

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’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.”

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 REFERENCES
a {
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’S
BOOTSTRAP
CSS Framework
Grid
Components
Mixins
Responsive UI

24. Amir Barylko MavenThought Inc.
BOOTSTRAP
Bootstrap is a sleek, intuitive,
and powerful front-end
framework for faster and easier
web 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 span9
span3 span9
12 column grid
step 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 icons
step 4

29. Amir Barylko MavenThought Inc.
NAVS
• Menu and content navigation
• Tabs
• Pills
• Stackable
step 5

30. Amir Barylko MavenThought Inc.
ALERTS
• Notify messages to the user
• Can be closed
• Can hide automatically
• Matches color coding
step 6

31. Amir Barylko MavenThought Inc.
TOOLTIP
• Easy tooltip to display on hover
• Can be formatted
step 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
• buttonBackground
step 8

34. Amir Barylko MavenThought Inc.
RESPONSIVE UI
• Styles that help to show/hide based on your resolution
• visible-desktop
• visible-tablet
• visible-phone
step 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