👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
…but the background colors and font colors.
What to do after writing the HTML markup?
Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town.
This morning, I gave the class a seat work — tear off a page, any page from any magazine and translate it into structured content marked up in semantic HTML. What does that mean?
Say you tore off a car advertisement page — most probably it would have the following elements on it:
- Brand logo
- Tagline
- Headline
- Subhead
- Images
- Paragraph of copy
- Fineprint
Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:
- Brand logo = h1
- Headline = h1
- Subhead= h2
- Paragraph of copy = p
- Images = img
- Fineprint = p
<liTagline = h2
Of course, we would still need to “group” those elements into bigger “boxes” such as:
- header
- div
- footer
With HTML tags, the content could be translated into:
[code lang=”html”]
Brand logo
Tagline
Headline
Subhead
Paragraph of copy
[/code]
Notice the addition of the <div> attribute “role” with the value, “main” — since we don’t have a semantic tag (yet) for a main content in our document, we used “role” to denote the meaning of that div’s content. “Main” simply means “main content”. It is one of the predefined Role values in XHTML. Here’s the complete list of Role values from W3C.
Categories
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.
Categories
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.
Categories
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 the floats
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:
- background-color
- color
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!
Categories
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:
- background-image
- background-repeat
- background-attachment
- background-position
- background-color
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.
Categories
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.