Yesterday, we posted about the Responsive, Mobile-Friendly Development Boilerplate called, Skeleton. A very nice responsive framework to build on. We also showed you 10 Solid Web Layouts, a summary of the ten basic layouts used in web design, today. A great page to bookmark for future use for sure! Today, I’ll share with you the code for three of the ten solid web layouts discussed, built on the Skeleton framework. Another great piece by the Design Shack’s Joshua Johnson.
Three Boxes
Three boxes is the most basic, but it also makes a great home page! Remember, all the code here is used with the Skeleton framework, so you’ll want to make sure you grab it!
HTML
First, you need to create the logo (left), navigation (right), big image (center/middle) and then the two bottom boxes:
[cc lang=”html”]
[/cc]
Now we can drop in some content, text for the logo, typical unordered list for the nav, and some placeholder images:
[cc lang=”html”]
Design Shack
[/cc]
The one thing that you need to be sure to catch is the “add-bottom” class that has been attached to several of the divs, this is a Skeleton feature that simply throws in a bottom margin.
CSS
This is primarily for your nav, and some cool stuff for your images so they resize based on the browser size. Drop this into a “layout.css” file:
[cc lang=”css”]body {
padding-top: 40px;
}
#nav ul li {
float: left;
margin-left: 30px;
line-height: 40px;
}
#bigphoto img, .smallphoto img {
max-width: 100%;
height: auto;
}[/cc]
Extra Media Queries
Skeleton deals with the bulk of media queries, however, there are some tweaks that still need to be made. Drop this in the “layout.css”:
[cc lang=”css”]/* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#nav ul li {
margin-left: 15px;
}
}
/* Mobile/Browser */
@media only screen and (max-width: 767px) {
h2 {
font-size: 2em;
margin-bottom: 0;
}
#nav ul li {
margin-right: 15px;
margin-left: 0;
}
}[/cc]
First, we take a little bit of the margin out of the menu items, no biggie. Next, when the page gets even smaller, we reduce the h2 size and change the menu margins to adapt to a new left-side layout.
Done! Let me just say, Design Shack is awesome. Now, for another one!
3D Screenshots
This is a popular look. Although, just about anything that looks like it was built by Apple is popular, right? Again, all three of these are built with the Skeleton framework. I think you’ll be surprised how easy it is to get this cool of a look, too!
HTML
This one starts similar to the first one. Then again, if you look at that top row, it is similar.
[cc lang=”html”]
[/cc]
As you can see, there’s a curveball here in the form of an extra wrapper, this will allow us to put in that dark bar behind the content at the top of the page.
[cc lang=”html”]
DS
Lorem Ipsum Doller Set
Lorem ipsum dolor sit amet…
[/cc]
Nice! You’re almost there.
CSS
There’s a little extra CSS here, than before, but nothing that should knock your socks-off:
[cc lang=”css”]body {
padding-top: 20px;
background: #888;
}
.container {
background: white;
padding: 20px;
margin-bottom: 20px;
}
#wrapper {
background: #444;
height: 40px;
color: white;
}
#wrapper h3 {
color: #fff;
line-height: 40px;
}
#wrapper a {
color: #fff;
text-decoration: none;
}
#wrapper a:hover {
color: #fff;
text-decoration: underline;
}
#nav ul li {
float: left;
margin-left: 30px;
line-height: 40px;;
}
img {
max-width: 100%;
height: auto;
margin: 0; padding: 0;
}[/cc]
And, again, with the media queries.
Extra Media Queries
Again, we need to add some CSS magic for the different screen size.
[cc lang=”css”]/* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#nav ul li {
margin-left: 15px;
}
}
/* Mobile/Browser */
@media only screen and (max-width: 767px) {
h1 {
font-size: 2.5em;
}
#wrapper {
background: white;
margin: 0;
}
#wrapper h3 {
background: black;
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
#wrapper a {
color: #000;
text-decoration: none;
}
#wrapper a:hover {
color: #000;
text-decoration: underline;
margin: 0px; padding: 0px;
}
#nav ul li {
margin-right: 15px;
margin-left: 0;
}
}[/cc]
How cool are you?
Featured Graphic
This is fun, isn’t it? If you’re very new at this, there’s a thread of relief to find how the mix of graphic art, HTML and CSS braid together. Once you begin to break down the individual elements, you realize it isn’t quite as hard as you first thought.
HTML
As you can see, this splits up much different than the first two:
[cc lang=”html”]
[/cc]
How easy is this! Now, for the rest.
[cc lang=”html”]
Design Shack
Lorem Ipsum
Lorem ipsum dolor sit amet…
Lorem ipsum dolor sit amet…
[/cc]
Are we having fun, yet?
CSS
The biggest thing to note here is that I didn’t actually insert a circular image. Instead I threw in a square image and used CSS border-radius to round the corners. Sure, some older browsers may show a square image, but I can definitely live with that as it won’t break our layout in the least. Note: I just realized that this trick only works in Webkit, if you want a rounded image in Firefox and elsewhere, you’ll have to make one manually in Photoshop.
[cc lang=”css”]body {
padding-top: 40px;
}
#nav ul li {
float: left;
margin-right: 30px;
line-height: 40px;
}
#theText {
margin-top: 60px;
}
#bigphoto img{
max-width: 100%;
height: auto;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}[/cc]
You may need to play around with the main image circle issue.
Extra Media Queries
Just some little tweaks, here. Remember, all of this goes in the “layout.css” file.
[cc lang=”css”]/* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#theText {
margin-top: 20px;
}
}
/* Mobile/Browser */
@media only screen and (max-width: 767px) {
#theText {
margin-top: 10px;
}
}[/cc]
I love how this resizes!
Do it!
Joshua Johnson did a great job over at Design Shack with this. If any of you guys pull these off, be sure to leave a link in the comments! For those of you new to this, remember, you can easily wrap WordPress in these. Take a look at a simple WordPress theme, and you can see which elements go where. You can do it!
Brandon Rowe says
Hey thank you so much for this 😀
But, I was wondering is it possible to to put a jquery image slider within the big photo div in the three boxes template. I’ve tried again and again but I could get the images and the slider to scale between different screen sizes. If you could help that would great 🙂
Eric Dye says
Try to find an image slider that’s responsive.