What is this?
If you say a “loader” you’re right. If you say a “throbber” also right.
But this looks more like a throbber:
—
By the way, for those of you thinking of using animated PNG for throbbers or loaders, browser support is currently bleak.
So, you want to visualize how large your background is with margins and paddings?
Utilize the color “red”. It’s easy to type in the keyboard and it appears instantly like a bright red fruit in the midst of the forest.
For example:
[code lang=”html” title=”HTML”]
<div class="favorite-things">
<ul>
<li>Mobile phone</li>
<li>Television</li>
<li>Couch</li>
</ul>
</div>
[/code]
[code lang=”css” title=”CSS”]
.favorite-things li {
margin:1em 0;
padding:1em;
border-bottom:1px solid #ccc;
}
[/code]
Let’s say you want to see how a background-color upon hover would affect an <li> element, you could do this in Firebug or any DOM inspection tool:
[code lang=”css” title=”CSS”]
.favorite-things li {
background-color:red;
}
[/code]
The element would show if you’ve got the correct spacing in your paddings and margins.
Remember when I suggested that you forget about the CSS while writing the HTML?
Now that you’ve got your HTML markup ready, it’s time to mind the CSS.
So what’s the first thing to do in applying the Mobile First principle?
Forget about which goes to the left or right. Remember, we’re building the presentational layer of the website for mobile viewports which are narrow so it’s OK to stack everything first.
I’m currently experimenting by styling these properties in order:
Styling the background-color according to the mock-up will give us a visual cue of each blocks hierarchy in a vertical manner. Then set the actual color of the text contained in each block.
After these, it’s time to go more detailed based on the mock-up. Maybe exporting the image assets is next.
I’ll keep you posted!
Don’t simply use the shorthand if you want to set only the background color:
[code lang=”css” title=”CSS”]
div {background:red;}
[/code]
Because what that really means is:
[code lang=”css” title=”CSS”]
div {background:none repeat scroll 0 0 red;}
[/code]
The background values in order are:
One of the conflicts in using the shorthand in styling only the background color is that it sets the background-image to none.
In case that you need to style the same selector with a background image, the value in the shorthand property will persist.
This doesn’t have much importance other than satisfying one’s obsessive-compulsivity.
We all take the hexadecimal values of colors to put as background-color or color of elements on our webpages.
If you could see the HSB (hue, saturation, brightness) values of your color, they are in degree, percentage, percentage, respectively. Round them off to the nearest multiple of 5.
For example, I get these values for a shade of yellow:
H: 45°
S: 57%
B: 99%
Hex: #fdda6d
Transform it to:
H: 45°
S: 55%
B: 100%
Hex: #ffdc73
This way, you put some meaning behind your colors.
Let’s say you have this line on your webpage:
Hey guys, you may email me at yoyo@whatsup.heh or call me at 14344.
and you want to break the line right after the word “or”.
Do you do this:
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or<br>
call me at <a href="tel:14344">14344</a>.</p>
[/code]
or this?
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or
<span class="break">call me at <a href="tel:14344">14344</a></span>.</p>
[/code]
[code lang=”css” title=”CSS”]
span.break {display:block;}
[/code]
The latter? You’re doing a great start!
What I mean by this is, as you are writing the HTML markup, you should check your webpage in the browser as it is — without heavy consideration on how big the fonts should be or which color would be preettyy… Just imagine you’re a visually-impaired person “reading” a webpage.
The same way with sentences, it should run continously without consideration on the width of its container or the length of its line.
If we want a break in the line, it is purely for presentational purposes so do it thru CSS.
