Brian Dys

::selection

[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]

Hex color value #00b6f2 is a nice shade of cyan
Font color is white

Image replacement

[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]

Moved up above the /* Author’s custom styles */ – so that styles of the main selector will be cascaded
Added display:block since most of my selectors are intentionally diplayed as a block element

Set and reset

[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.

Clearfix inside a wide viewport media query

[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.

Show .assistive-text only to screenreaders

[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:

I added legend to .visuallyhidden class selector since I don’t need that label much

Update – Nov 14, 2012:

Removed list-style of <ul>

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.

Inside the <head>

[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">

<!–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:

initial-scale=1.0 in <meta name=”viewport”> – fixes some background image bugs
favicon.ico in <link rel=”shortcut icon”> – the default in H5BP does not appear in browsers
<link rel=”profile”> from WordPress
Facebook Open Graph <meta> tags – it could be removed upon integration with WordPress

Inside the <body>

[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–>

<!– 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:

Header – Content – Footer structure
-cr suffix is “container” – should contain the width of the block
-ct suffix is “content” – should contain the padding of the block

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.