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