I recently wrote a theme for my site with a few simple goals
- Sticky footer at the bottom of short pages. (Without the need to bump content)
- White background for content that stretched to the bottom of the page.
- 2 Columns – One fixed for navigation/widgets. The second fluid for content.
- CSS Only resizing for mobile devices.
The page works and looks great on iPad, phones, low desktop resolutions and widescreen.
All of these a certainly possible, individually but require a bit of hacking together. I've written a boilerplate theme that does all of the above very cleanly.
Everything's done in CSS, there's no empty divs to push content around the page like some other examples - I'm making it free for anyone to edit.
[URL]https://jthorne.co.uk/projects/nuance/[/URL]
Sample page: [URL]http://redslide.github.io/Nuance/index.html[/URL]
Hope you guys enjoy. Any code changes / comments / feedback would be nice.
I know its probably late to be releasing HTML boiler plates, but there's nothing like this out there. Its taken me a couple of days to prepare for release. So enjoy!
From what I remember reading from a website is that you don't actually use footer and header tags to divide the whole webpage, but the article the page might have. you can use header and footer multiple times.
[editline]16th May 2013[/editline]
btw what are html hacks?
jung3o. Thanks I'll edit to allow multiple headers and footers. Completely forgot about that one!
html hackery in my opinion is using divs and spans to move content around the page such as this:
[url]http://ryanfait.com/sticky-footer/[/url]
when the thing turns in to a "mobile" sized webpage, you need to make the nav buttons so the whole thing is click-able.
That'd be helpful. Looks like I removed it when I was tidying up. Its back in now :)
Sorry, you need to Log In to post a reply to this thread.
