Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
About Snippet
Categories
0
Comment
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">
<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:
- 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–>
<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:
- 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.
Categories
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
Selectors are the ones you target in the HTML document to apply the styles to. Basically, selectors can be:
- HTML tags: html, body, h1, ul, li, p, etc.
- Classes: .main-nav, .footer, etc.
- IDs: #branding, #content, etc.
And many more: http://www.w3.org/TR/CSS2/selector.html
Properties
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:
- Font size = font-size
- Font color = color
The Full property table: http://www.w3.org/TR/CSS21/propidx.html
Values
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
Categories
Bloat the stylesheet and not the HTML markup.
Everybody agree?
The big baby way of styling:
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.
The big boy way:
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).
Categories
In case that you need to test your website in your mobile device, just connect to your PC IP address (given that you’re using XAMMP).
Here are the steps:
- Run XAMMP
- Know your PC’s IP address by running “cmd” and typing “ipconfig”
- Type that IP address into your iPad’s browser
- If XAMMP talks about its “new security concept” then you have to edit this file from the XAMMP folder: httpd-xampp.conf
- Go to: xampp\apache\conf\extra
- Open “httpd-xampp.conf” in a text editor
- Look for this line “Allow from ::1 127.0.0.0/8” and below it, add “Allow from all”
- Restart XAMMP
- Done!
Categories
I’ve first used an iPhone and iPad before I experienced using an Android (particularly a meager Samsung Galaxy Y with Android 2.3). The very natural controls of Android were the static/consistent position of Back and its context menus (long pressing certain items particularly lists).
Then I had to use iPhone again and kept on tapping on the wrong places. Yes, it is all about habit and conditioning but I’d still find that back button useful for iPhone (instead of having it on the top toolbar).
And the context menu. Why do I need to take extra steps in deleting or editing an item? For example, I would like to delete a contact; in Android, long pressing a contact would bring up a context menu while in iPhone you would need to find the Edit button and find out what is available to edit.
I remember in the era of DHTML, right-click customized menus in webpages were made available. But it was against the norm and it was new and people just wanted to stick with what’s recognizable.
That shouldn’t happen in these times. We should be innovating towards what would make the lives of people easier and better (or at least not harder or worse).
A time will come when everything would have context menus. You would have an option to do something to anything you right-click on or long-press on. Or maybe to anything you point your Wikipedia gun at.
Categories
So how really do you get the height of the longer div and apply it to another so that they would have equal height?
Simple. By JS! I’m not in a master-level when it comes to jQuery or JavaScript; I still run to Stack Overflow and jQuery documentation to get a general knowledge of which does what.
Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:
[code lang=”js”]
$(document).ready(function() {
var $longerDiv = $(‘#long-div’).height();
$(‘#short-div’).css(‘min-height’, $longerDiv+"px");
});
[/code]
This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]
And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]
Check out the demo on jsFiddle: http://jsfiddle.net/8WDWf/
There might be a better way in doing this — hit up the comments!
—
Other code-testing sites on CSS-Tricks: http://css-tricks.com/seriously-just-make-a-jsfiddle/