[code lang=”html”]
<div class="mod">
<div class="mod-cr">
<div class="mod-hd"><h3 class="mod-heading">Heading label</h3></div>
<div class="mod-ct"></div>
</div>
</div><!–.mod–>
[/code]
This is the basic structure of every content block in your webpage. This way, it would be modular, meaning, you could move it anywhere in the page without too much dependency on other elements.
Update – Nov 12, 2012:
[code lang=”css” highlight=”2,3,8,9″]
::-moz-selection {
color:#fff;
background: #00b6f2;
text-shadow: none;
}
::selection {
color:#fff;
background: #00b6f2;
text-shadow: none;
}
[/code]
[code lang=”css” highlight=”6″]
/*
* Image replacement
*/
.ir {
display:block;
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
[/code]
[code lang=”css”]
/*=========================Reset=========================*/
h1, h2, h3, h4, h5, h6, p, ul, ol, li {margin:0; padding:0;}
ul {list-style:none;}
/*=========================Set=========================*/
p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
[/code]
Resetting all basic text tags and setting the margin for <p> to bottom.
[code lang=”css” highlight=”1,17-34″]
@media only screen and (min-width: 1024px) {
/* Style adjustments for viewports that meet the condition */
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
}
[/code]
I changed the media query from em to px because I am targeting viewports with exact dimensions.
Clearfix which solves floating problems are placed inside this media query because for narrow viewports, I don’t plan to use floats.
[code lang=”css”]
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden,
legend,
.assistive-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus,
.assistive-text:active,
.assistive-text:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
[/code]
Update – Nov 13, 2012:
Update – Nov 14, 2012:
Polishing up some spacing by putting some margins and paddings.
I’ve mashed up the HTML code of HTML5 Boilerplate and WordPress to come up with something useful for my projects at International Red.
Take a look if this will suit yours.
[code lang=”html” highlight=”6,10,11,14-20″]
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!–Facebook Open Graph–>
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="fb:admins" content="">
<meta property="og:description" content="">
</head>
[/code]
Significant additions include:
[code lang=”html” highlight=”6,7-75″]
<body>
<!–[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]–>
<div id="page" class="home-page hfeed">
<header id="branding" role="banner">
<div id="header-cr">
<div id="header-ct">
<hgroup>
<h1 id="site-title"><a href="#">Site title</a></h1>
<h2 id="site-desc">Site description</h2>
</hgroup>
<nav id="access" role="navigation">
<h3 class="assistive-text">Main Menu</h3>
<div class="skip-link"><a class="assistive-text" href="#primary" title="Skip to primary content">Skip to primary content</a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
<ul id="main-nav" class="nav">
<li id="home-nav current"><a href="#">Home</a></li>
<li id="about-nav"><a href="#">About</a></li>
</ul>
<ul id="secondary-nav" class="nav">
<li id="contact-nav"><a href="#">Contact</a></li>
<li id="fb-nav"><a href="#">Facebook</a></li>
</ul>
</nav>
</div><!–content–>
</div><!–container–>
</header><!–#branding–>
<div id="main" role="banner">
<div id="main-cr">
<div id="main-ct">
<div id="primary">
<div id="primary-cr">
<div id="primary-ct">
<div id="content" role="main">
Main content
</div>
</div><!–content–>
</div><!–container–>
</div><!–#primary–>
<div id="secondary">
<div id="secondary-cr">
<div id="secondary-ct">
<div id="aside" role="complementary">
Complementary content
</div>
</div><!–content–>
</div><!–container–>
</div><!–#secondary–>
</div><!–content–>
<div id="primary">
<div id="primary-cr">
<div id="primary-ct">
<div id="content" role="main">
</div>
</div><!–content–>
</div><!–container–>
</div><!–content–>
</div><!–#primary–>
</div><!–container–>
</div><!–#branding–>
<footer id="colophon" role="contentinfo">
<div id="header-cr">
<div id="header-ct">
<nav id="footer-access">
<ul id="footer-links" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="credits">
<p id="copyright">© 2012 Site title. All rights reserved.</p>
<p id="intl-red">Site by <a href="http://international-red.com/" target="_blank">International Red</a></p>
</div>
</div><!–content–>
</div><!–container–>
</footer><!–#colophon–>
</div><!–#page–>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.8.2.min.js"><\/script>’)</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!– Google Analytics: change UA-XXXXX-X to be your site’s ID. –>
<script>
var _gaq=[[‘_setAccount’,’UA-XXXXX-X’],[‘_trackPageview’]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=(‘https:’==location.protocol?’//ssl’:’//www’)+’.google-analytics.com/ga.js’;
s.parentNode.insertBefore(g,s)}(document,’script’));
</script>
</body>
[/code]
Significant additions include:
If you would notice the structure of inner modules, it is Module – Container – Content.
For example, a search box. You would style it this way:
[code lang=”html”]
<div id="search-module" class="module">
<div class="module-cr">
<div class="module-ct">Search content</div>
</div>
</div>
[/code]
In the stylesheet:
[code lang=”css”]
.module {float:left;}
.module-cr {
margin:0 auto;
width:50%;
background-color:white;
}
.module-ct {padding:1em;}
[/code]
In this way, the width of the block is not dependent on its padding and vice versa. The block becomes more modular and you should be able to plaster it anywhere in your site.
Here are the basic parts of a CSS:
[code lang=”css”]
p {font-size:1em;}
[/code]
Which translates to:
[code lang=”css”]
selector {property:value;}
[/code]
Selectors are the ones you target in the HTML document to apply the styles to. Basically, selectors can be:
And many more: http://www.w3.org/TR/CSS2/selector.html
Properties are attributes of the selector you want to control. For example, you want to control a paragraph’s font size and color, the properties are:
The Full property table: http://www.w3.org/TR/CSS21/propidx.html
Values are the values of the properties. How big or small will be the font size and which color? Say you want to make a paragraph’s font size 24 pixels and colored red, the answers are the values.
[code lang=”css”]
p {
font-size:24px;
color:red;
}
[/code]
Tweak some CSS here: http://cssdesk.com/uGcKH
Bloat the stylesheet and not the HTML markup.
Everybody agree?
HTML:
[code lang=”html”]
<p class="big">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="red">Don’t let my heart be breaking</span></p>
[/code]
CSS:
[code lang=”css”]
.big {font-size:2em;}
.bigger {font-size:3em;}
.red {color:red;}
.green {color:green;}
[/code]
Isn’t that pretty? If you want to make the paragraph’s font size bigger, you only need to change its class to “bigger” and the red line could be green in no time.
But no. Like the title said, grow up CSS kids. CSS spoonfeeding stops here.
HTML:
[code lang=”html”]
<p class="lyrics">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="ouchy">Don’t let my heart be breaking</span></p>
[/code]
CSS:
[code lang=”css”]
.lyrics {font-size:2em;}
.ouchy {color:red;}
[/code]
When you’re working on HTML markups, set aside the stylesheet. All you have to do is name your HTML tags for what they are and not for what you want them to appear.
Like in the example above, that paragraph contains lyrics and not some random big texts so name it “lyrics”.
Think about this: if the developers kidnap your HTML file and all you have is the stylesheet, it would look stupid to have a “red” class name but appears to be in a different color (if the client tells you to make it green).
