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
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; }
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
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
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