CSS workshop created for internal delivery @ OutSystems.
“For most people CSS is like a mystical art that nobody truly understands... Sometimes it works and sometimes it doesn’t (unexplainably) “.
Not solely introductory, but also covering more advanced topics, embark in this fantastic adventure that is CSS.
There you have it, all you must know about CSS in a NutShell.
See the videos of the workshop @ http://goo.gl/NJ3n6J
Workshop created by Marco Costa, Miguel Ventura and Rúben Gonçalves
2. WhoamI?
Rúben Gonçalves
A CSS lover@ OutSystems
ruben.goncalves@outsystems.com
rubengoncalves
Kudosto Marco Costa andMiguel Ventura for makingthispossible.
5. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries
*OSDE –OutSystems Development Environment
6. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries
7. The Web “three leg stool”
JavaScript
HTML
Colors,
backgrounds,
formatting,
positioning, …
Additional
ways for the
user to interact
with the application
Content,
Data, Containers
and Tables
Structure
Presentation
Behaviour
CSS
8. CSS stands for?
CSS = CascadingStyleSheets
WHY ?
Browser
Author
User
!important
It’s all about:
What ruleto apply
to a certain element
ais blue
a is red
ais gray
ais purple
9. But why CSS?
•A clear separation of presentation and content
•A set of rules telling the browser how to display elements
•Allows the sharing of style sheets across documents
•Makes it easy to "skin" a web site (theme)
11. Syntax 101 -Selectors
•by tag, like div
•by class, like .MainContent
•by id, like #wt13_wtMainContent
•by pseudo-class, like :hover
•by attribute, like [disabled]or [type=checkbox]
<divid="wt13_wtMainContent"class="MainContent">
<inputtype="checkbox"disabled/>
12. Syntax 101 -Selectors
•by tag, like div
•by class, like .MainContent
•by id, like #wt13_wtMainContent
•by pseudo-class, like :hover
•by attribute, like [disabled]or [type=checkbox]
<divid="wt13_wtMainContent"class="MainContent">
<inputtype="checkbox"disabled/>
13. Syntax 101 -Selectors
•by tag, like div
•by class, like .MainContent
•by id, like #wt13_wtMainContent
•by pseudo-class, like :hover
•by attribute, like [disabled]or [type=checkbox]
<divid="wt13_wtMainContent"class="MainContent">
<inputtype="checkbox"disabled/>
14. Syntax 101 -Selectors
•by tag, like div
•by class, like .MainContent
•by id, like #wt13_wtMainContent
•by pseudo-class, like :hover
•by attribute, like [disabled]or [type=checkbox]
<divid="wt13_wtMainContent"class="MainContent">
<inputtype="checkbox"disabled/>
15. Syntax 101 -Selectors
•by tag, like div
•by class, like .MainContent
•by id, like #wt13_wtMainContent
•by pseudo-class, like :hover
•by attribute, like [disabled]or [type=checkbox]
<divid="wt13_wtMainContent"class="MainContent">
<inputtype="checkbox"disabled/>
22. Syntax 101 -Selector COMBOs
•Apply same style to many selectors
oselector 1,selector 2
23. Syntax 101 -Selector COMBOs
•Apply same style to many selectors
oselector 1,selector 2
•Elements one inside another
o.head .title{ font-size: xx-large; }
24. Syntax 101 -Selector COMBOs
•Apply same style to many selectors
oselector 1,selector 2
•Elements one inside another
o.head .title{ font-size: xx-large; }
•By tag, class, with two attributes
oinput.big[type=checkbox][disabled]{ cursor: not-allowed; }
27. Specs say:
Use #IDsto apply style to single element
Use .classto apply style to a class of elements
But in OutSystems
IDs are generated dynamically --you can't predict them…
So use classes everywhere instead.
PROBLEM SOLVED!
OutSystems Checkpoint
33. Syntax 101 -Properties
Thinking of doing X?
There's probably a CSS property for that.
Good references:
•W3C CSS spec
•MDN
34. Exercise 0
•Get your gear http://goo.gl/ql8CHD
•Login to your personal environment
•Publish the eSpace CSSShop
•Except requested, all css should be done in the respective Page.
46. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries
47. Some markup you find as example in the internet is hard to reproduce in SS, such as lists or HTML5 elements:
<section>
<header>
<nav>
<ul> <li>...</li>
<li>...</li>
</ul>
</nav>
</header>
</section>
But do you need it?
OutSystems Checkpoint
48. Converting from a template: classify everything!
<sectionid="sec01"class="first">
markup
styles
section{font-weight: bold; }
#sec01{font-style: italic; }
49. Converting from a template: classify everything!
<sectionid="sec01"class="first">
markup
styles
.tag-section{font-weight: bold; }
.id-sec01 {font-style: italic; }
50. Converting from a template: classify everything!
markup
styles
.tag-section{font-weight: bold; }
.id-sec01 {font-style: italic; }
<div
class="first tag-section id-sec01">
52. Exercise 3
•Our customer’s webdesigner handed us a bunch of HTML and CSS files
•You should convert everything to the OutSystems platform visual design tool!
•Use TemplateToSSminimalism-template
•Convert the whole header portion, including the DaVinci quote to SS
Download the template
82. Side by Side?
width: 100px;
First block... This could be a menu item
Second block... I want to be a menu item too!
83. Floats and Clears
First block... This could be a menu item
Second block... I want to be a menu item too!
width: 100px;
float: left;
Third block... This could be the footer
Third block... This could be the footer
clear: left;
84. The Clearfix
First block... This could be a menu item
Second block... I want to be a menu item too!
width: 100px;
float: left;
Third block... This could be the footer
clear: both;
visibility: hidden;
I am invisible!
85. “A floated boxis positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible.
(…)
When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.”
Taken from: maxdesign
87. Avoid using floats
•They’re messy and you’ll spend a lot of time clearing that mess! (more on this)
•You will meet them in web tutorials for IE6 and in legacy code over and over again...
•More info
88. A better float: inline-block (IE7+)
First block... This could be a menu item
Second block... I want to be a menu item too!
width: 100px;
display:
inline-block;
Third block... This could be the footer
/* the default */
display: block;
*display:inline;
*zoom: 1;
101. Agenda
•CSS b-a-ba
•Bug? Inspect it!
•Bring to OSDE
•Box Model
•Box placement
•Vertical Alignment
•Browser compatibility
•CSS BestPratices
•Grids & Media queries
102. Vertical Alignment
•Applied to table cells, changes cell content
•Applied to images changes the image vertical positioning relative to the line
•Applied to inline-blocks... depends on the line where the inlinesits (check example)
Let’sseeanexample
104. Escaping the gravity,relatively
First block...
Second block...
Third block... This could be the footer
position: static;
position: relative;
top: -100px;
left: 100px;
Second block...
block is kept in the normal flow
Third block... This could be the footer
margin-bottom:
-210px;
105. Escaping the gravity,absolutely
First block...
Third block... This could be the footer
position: static;
absolute;
block is removed from the normal flow...
The third block moves under it
Third block... This could be the footer
Second block...
Second block...
left: 100px;
top: 100px;
Second block...
right: 0px;
bottom: 0px;
Second block...
inner
position: absolute;
bottom: 0;
left: 0;
inner
Second block
top: 0;
inner
absoluteactually relative to the first parent not static
106. Positioning
Relativetakes space, absolutedoesn’t
Absolutecoordinates are relatively absolute
You can set dimensions using positioning
More info
113. Browser compatibility
•Everyone’s Chrome version will be higher by the time this presentation ends
•Firefox, Opera, ..., users are savvy enough to care about updates
•IE updating resembles installing a new version of Windows, and it is many times controlled by system administrators (on corporate networks)
115. Graceful Degradation
Theart of letting go those round corners.
.c {
background-image:
linear-gradient(blue,navy);
/* fallback to a normal blue */
background-color: blue;
}
124. Browsers STILLbehavedifferently
Well… Therewillbealwaysdiferences
Is IE6support required?
Yes
No
Development time x2
QA time x2
Box model works different in IE6
x3
And there’s all the bugs that will never be fixed
x4
132. Conditional CSS
•You can use classes if you want to
<!--[if IE 7]><scripttype="text/javascript">
osjs('html').addClass('ie7');
</script><![endif]-->
.c {border-radius: 10px; }
.ie7 .c{border: 1px solid black; }
133. Modernizr
•Isn’t really what you think it is, sorry.
•Enables use of HTML5 tags in IE (but we don’t need that)
•Provides feature detection mechanisms
135. Polyfills
Scripts that enhance your browser’s capabilities... But they always come at a cost!
CSS3 PIE (http://css3pie.com/)
Other resources (https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-Polyfills)
156. Exercise 9
•Duplicate the page Exercise 5
•Rename it Exercise 9
•The exercise is to make this page Responsive
•Needs to be responsive to all devices
158. Be Pragmatic
•If CSS gets in your way, go the other way
oExample: vertically centering
•Use CSS as a fast-prototyping tool
oIf old browsers get too quirky, print-screen and use images!
Welcome to the CSS Worshop
This workshop is essentially introdutory, but event if you’ve been using CSS for years, it can still be useful. Most people think that CSS is like a mystical art that nobody truly understands... Sometimes it works, sometimes it doesn’t...
People are usually afraid of CSS and try to understand it as little as possible and hack with it instead of building with it. Nothing good ever comes out of this approach.
Browser bugs and incompatibilities don’t help here, but the fact that people don’t even try to read and understand the specifications helps even less.
Typically this is how our css ends up looking like....
The three major pillars for websites and web applications are:
HTML
CSS
JavaScript
In this workshop we’ll focus on the CSS.
Cascading Style Sheets or CSS are set up so that you can have many properties all affecting the same element. Some of those properties may conflict with one another. For example, you might set a font color of red on the paragraph tag and then later on set a font color of blue.
There are three different types of style sheets
Author Style Sheets
User Style Sheets
User Agent Style Sheets
Basic CSS rule syntax... Selectors, properties and values
Kinds of selectors:
- tag: html tag (h1, div)
class
id
pseudo-class: to add special effects do some selectors
attribute: html elements can have specific attributes, not just ID and class
Kinds of selectors:
- tag: html tag (h1, div)
class
id
pseudo-class: to add special effects do some selectors
attribute: html elements can have specific attributes, not just ID and class
Kinds of selectors:
- tag: html tag (h1, div)
class
id
pseudo-class: to add special effects do some selectors
attribute: html elements can have specific attributes, not just ID and class
Kinds of selectors:
- tag: html tag (h1, div)
class
id
pseudo-class: to add special effects do some selectors
attribute: html elements can have specific attributes, not just ID and class
Kinds of selectors:
- tag: html tag (h1, div)
class
id
pseudo-class: to add special effects do some selectors
attribute: html elements can have specific attributes, not just ID and class
Let’s see some examples of selectors.
Consider the html displayed below, which elements will be selected with the selectors above.
Let’s see some examples of selectors.
Consider the html displayed below, which elements will be selected with the selectors above.
Let’s see some examples of selectors.
Consider the html displayed below, which elements will be selected with the selectors above.
Let’s see some examples of selectors.
Consider the html displayed below, which elements will be selected with the selectors above.
Let’s see some examples of selectors.
Consider the html displayed below, which elements will be selected with the selectors above.
There are tons of kinds of selectors.
Most of them you don’t need on a daily basis though some web designers like to use them all.
Most browsers don’t really support all of them.
Selectors can be made out of combinations of selectors.
One of the most important is the ability to define multiple selectors for the same style.
Another very important combo is Elements inside another.
Selectors can be made out of combinations of selectors
An example
If an element is matched by many selectors, the resulting style depends on the priority of the selectors:
Inline style
Id selector
Class / attribute selector
HTML tags selectors
All elements
Specs recommend using #identifiers for styles that appl to a single element but that’s hard in SS because IDs are generated dynamically.
The order of definition in the CSS file is another important thing to have in consideration.
The last redefinition is te one how “wons”, overriding the previous definitions and eventually adding new ones.
Important note, how imports work:
Link to css added with function HTTPRequestHandler.AddStyleTag
webblock CSS
Theme CSS
Page CSS
Inline import CSS
Overrides: border, font-style, color
In the end, 5 properties are merged: 2 directly applied and 1 inherited
Every element has some style (even if user-agent provided)
Beware of collapsed properties (eg: border)
There’s a ton of them. They serve several aspects of a design. Everyday new properties start getting support from browser vendors.
Probably there’s already a property for whatever you’re thinking of doing.
W3C and Mozilla are good resources for finding out about properties
Clone eSpace CSSShopExercises
Clone eSpace CSSShopExercises
Clone eSpace CSSShopExercises
Now we’re going to see how can we tackle CSS problems faster
Changing faster means faster improvements and better ideas.
If the feedback is instantaneous, your productivity will be unmatched.
OutSystems allows 1-click-publish but it’s still nothing like instant feedback.
You change, publish, wait, refresh, refresh again, get back... What were you editing?
We can use firebug for instant feedback. You can sit down with a stakeholder for your project or with your designer, and make changes in place.
Some example of what could be done:
border-radius: 10px 10px 10px 10px;
border: 1px solid #00C812;
color: white;
cursor: pointer;
font-size: large;
padding: 10px 20px;
background: -webkit-linear-gradient(top, #9DD53A 0%, #A1D54F 50%, #7CBC0A 100%)
background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
We can use firebug for instant feedback. You can sit down with a stakeholder for your project or with your designer, and make changes in place.
Some example of what could be done:
border-radius: 10px 10px 10px 10px;
border: 1px solid #00C812;
color: white;
cursor: pointer;
font-size: large;
padding: 10px 20px;
background: -webkit-linear-gradient(top, #9DD53A 0%, #A1D54F 50%, #7CBC0A 100%)
SS doesn’t allow making use of some fancy elements. But do we need such elements?
We can use containers for everything and differentiate the original element tag with classes
We can use containers for everything and differentiate the original element tag with classes
We can use containers for everything and differentiate the original element tag with classes
Most of us have a lot of trouble when the time comes to layout stuff in the screen using CSS.
How does it work? What guidelines can we use to help us?
We should recognize all elements rendered by a browser as boxes. All elements means...
Paragraphs live in boxes
Bullets live in boxes
Some elements aren’t really boxes... They’re inline ... But they can be inline boxes.
Rule of thumb... Everything is a box.
Another thing you should learn about boxes is that boxes have dimensions
Inner width and height
Border widths
Padding (an internal margin)
Margin, the external margin
Do you actually know a very useful difference between margin and padding?
Margins, if the element isn’t inline, overlap!
You can check those dimensions in your favorite web debugging tool... Search for Layout and see
You’ll often want to play with dimensions... Using borders to give elements some relevance, using padding to let their contents breathe.
And you’ll have to remember that most times dimensions don’t work as you’re expecting
The box on the left has 200px height
The box on the right has style=“height:200px;”. But it’s true taller. Why?
Height is the inner height, which differs from the visible height. Remember to add padding and border width.
This is called the W3C box model.
In this case, 150px of height gives us a visible height of 200px.
Sometimes border and padding do make a lot of difference.
And you’ll have to remember that most times dimensions don’t work as you’re expecting
The box on the left has 200px height
The box on the right has style=“height:200px;”. But it’s true taller. Why?
So what have we seen until here?
- We know about CSS rules
We can use firebug for instant feedback
We know that browsers behave differently
We know everything is a box.
How do we layout those boxes?
Let’s see lifetime
And let’s remember that everything is a box
Header is full of boxes, etc.
Boxes are layed out according to gravity, which means they go up and fill all the horizontal space they can
Sometimes we want to have items side by side
So we can’t let the boxes fill the whole horizontal space
We have to allow them to float
By floating, they get cornered
We have to apply a clear rule to escape the floating
A common technique known as clearfix is to have an invisible clearer.
The reason why floats are kind of bad is because they live in their own flow
If you put a floated element inside a non-floated element, the outside element will act as if the inside element wasn’t even there. Yuck!
Inline-blocks are way more intuitive. If you can (if you don’t need to support IE6), use them. You can thank me later.
See lifetime? No IE6 so we have blocks (lines) and inline-blocks (columns).
We didn’t use a tablerecords because we didn’t know how many columns (environments) we would have
So we have a listrecords with the line-blocks, and inside it a list-records with the inline-block cells.
Who needs tables?
See lifetime? No IE6 so we have blocks (lines) and inline-blocks (columns).
We didn’t use a tablerecords because we didn’t know how many columns (environments) we would have
So we have a listrecords with the line-blocks, and inside it a list-records with the inline-block cells.
Who needs tables?
Floats and inline blocks flow in a liquid layout: they adapt to their container.
What happens when we resize that container?
Now that you know about how to layout the boxes
Try emulating this layout
Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
Another thing that you can recognize is that most pages flow in a grid with rows and columns
Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
Another thing that you can recognize is that most pages flow in a grid with rows and columns
Boxes are everywhere... If you get used to seeing them, designing with CSS will become way much easier
Another thing that you can recognize is that most pages flow in a grid with rows and columns
Sometimes laying out the boxes using the document flow isn’t enough. Sometimes we just want our boxes to fly.
We can relatively escape the document gravity by using relative positioning.
The base coordinates for relative positioning have their origin where the element should be
The element’s space is kept, so if we want it to be ignored, we can specify a negative margin of it’s own size.
Negative margins can be used to make your elements take less space and even take no space at all.
Another kind of positioning is the absolute positioning.
In absolute positioning the coordinates are set in the document (more on that later) and the elements are actually removed from the document flow; their space is removed.
You can also use right and bottom coordinates instead of left and top
Absolute positioning sets the coordinates to the first non-static element.
Firebug the links to be a right menu.
Firebug the buttons to invert their order
We’ve put some gradients and round corners, etc. Those CSS properties work only in the so called modern browsers. What happens when we have to support older browsers?
This doesn’t mean you can forget about older browsers...
Browser compatibility means you have to support every browser, be it through graceful degradation or other methods.
What browsers will you support in the next 10 years?
Graceful degradationi is the art of letting go. Are the round corners really that important or could the % of people using IE7 live without them?
As browsers get older, their share dimminuishes, so you have to manage the time you spend making things pixel-perfect-the-same
As browsers get older, their share dimminuishes, so you have to manage the time you spend making things pixel-perfect-the-same
Check your users’ browser share and don’t forget to check on IE’s versions.
Supporting IE is different from supporting IE6…
Check your users’ browser share and don’t forget to check on IE’s versions.
Supporting IE is different from supporting IE6…
In IE& the “shoes” and the “hat” actually count as visual height.
Join the movement!
There are some tools at your disposal to help with browser compatibility
You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
You can use conditional CSS by using hacks (eg: star-property is only recognized in IE7, underscore in IE6)
You can use more readable approaches.
If you were using modernizr, you could use .no-round-corners instead of .ie7.
Modernizr doesn’t make your browser more moddern
It makes it recognize some elements and provides feature detection so you can verify if your browser supports round corners instead of checking if the browser is IE<9.
Polyfills emulate new functionality on browsers that don’t support it. Usually this happens by the means of scripts that emulate behaviors and running features that were supposed to be native using scripts comes at a cost.
Sometimes pages hang, sometimes script errors occur, sometimes your layout gets all screwed. Be careful and test these alternatives a lot.
Firebug the links to be a right menu.
What was wrong? CSS contaminates
Normalize: sets the same style across browsers preserving some defaults
Reset: completely overrides the browsers css in order to flatten them up
When you’re creating widgets, try to get your style self-contained.
A good practice is to use a common prefix to all your styles and not to use selectors that are way too generic.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.[1] and is a cornerstone technology of Responsive web design.
As with all good things, this presentation must come to an end
Always be pragmatic
There’s no magic. If you don’t understand a behavior, take the time to read the standard, it will make you a lot faster in the future.