Image to HTML/CSS template -- from scratch [DEMO]

Hey y’all

I’m working on a new project and thought this might be a good time to demo how I write my CSS and the thinking that goes behind it.

CSS isn’t difficult. You just think of how you want your page to look like, and give it that property. As Captain Jean-Luc Picard says “Make it so!”

Sorry, I’m a day or two late before I thought of making this post. So most of the initial CSS work was already done (environment setup, day 1 coding, etc). If you have questions, I’d be happy to answer and make a followup post.

But for now, I’m working on the left navigation bar so that’s where I’ll start.

If you’re interested in more posts like this, or updates to this, let me know.

Okay, first things first… I made a design of what I want the page to look like. In Photoshop.

Pretty basic, typical admin page. I want the menu options on the left, with submenus that can open up/slide down to display more options. I want the top header to be fixed and stays in place even when users scroll up. For that matter, I also want the left navigation column to stay in place. – okay, that’s my plan. Let’s see if we can make the HTML/CSS to do that.

This is the skeleton HTML I came up with.

First, I analyze the screenshot mockup and figure out the best way to approach this.
I decided I want the top header to be on it’s own row, and the navigation and white space/content to be another row.

Per semantic naming, I called the first row ‘header’. Inside that header, will be the sitename on the left, and the page title and welcome/logoff links on the right. So we need to divide header into 2 columns… thus, the 2 divs inside the header.

But on the 2nd div, I need to further divide it to show the Page Title and the welcome/logoff links on the right side. So we have another 2 div sections there.

Pretty straightforward.

On the second row, we’ll have the left navigation column, and the content section as the 2 divs. So as you can see, they’re enclosed in a div section.

And this is what our html page looks like.

As you can see… it’s boring. Nothing like the Photoshop screenshot we have.

So now, let’s put CSS to work and apply some styling to our naked HTML page. – “Make it so!”

As I’ve said, I’m late before thinking about making this post. But this is the CSS code necessary to create the header… and now, our HTML page looks like this!

Hey, we’re getting there. Slowly but surely.

To make the header fixed on the top position even when user scrolls, I have to put in “position: sticky”. But this CSS property doesn’t work unless you also specify a top position. So I put “top: 0px” meaning, when user scrolls the browser window up, continue displaying this div at this position.

Further details for those interested:

BTW, I made LESS variables some key dimensions or constants I may need later on. That way, if I decide to change the value or colors, I don’t have to go hunting for all occurences of it in the CSS code. I can just change one line.

So now, let’s work on the nav element on the left side of the page.

The first thing I usually do is assign the div I’ll be working on some color… so I can see what I’m modifying! So let’s give it a yellow color (or some other random color).

And whops, there it is… we can clearly see what the nav section is occupying.

As you can see, it’s occupying a whole row, spanning the whole width of the page (evidenced by the yellow background color)

Well, I don’t want the whole width of the page, I just want the wide of the left navigation bar… which is the same width as the sitename div, which we defined as @nav-width in our variables section.

So let’s give nav a fixed width.

And we get this, the nav is occupying the same width as our sitename section.

Of course, there’s a problem… the nav should be extending the whole left section of the page. So we need to set height. But I don’t know the height… ahhh, so let’s use the viewport height (vh). We want 100vh, i.e. 100% of the viewport height.

and now our page looks like this:

Let’s get rid of the yellow background color and use our @theme-color.

Okay… we got what we want, now we want that content section to be on the right side of the navigation column… not at the bottom, off the page.

How can we do that?

We just give our nav section a “float:left”

And voila! Our content section is now in it’s right place.

A minor problem is our text is hitting the top header and left nav section. We need some padding. So what CSS property do we use? of course “padding” for the content element.

Hmmm… well, that’s strange, only the top portion have padding? There’s no padding on the left side.

Now, if you open up Dev Tools, you can see that the content div is extending all the way to the left margin of the browser. We want the content section to start to the right of our nav section. We need to push it to the right, of whatever nav width we have.

And this is where LESS variables shine.

Let’s preview our page again.

Dang it… nothing changed.

We forgot the “display:block” property. Let’s add it.

Yes, it works now the way we want it.

(the time/date text is outside of any div section… I display that during testing so I know if I need to refresh the cache. My IIS web server is in a Windows virtual machine, but the files are in an OSX volume, and sometimes Windows doesn’t detect that the file on the network share has changed/been edited, and IIS doesn’t recompile the page. – long story)

Now let’s put some dummy text on the nav section.

So finally… we want our left nav section to stay in place even when scroll up the page. So overall, the top header and left nav section stays in place.

We apply “position:fixed” to the nav.

Add some more text and photo on the content div so it will be easier to see when it’s scrolling…

And we got the layout we want.

Hope you enjoyed this quick demo. As you can see, working in CSS isn’t hard and could be fun, just do it step by step. Do not make a bunch of CSS changes if you’re not sure of what it will do. Make one change, and preview the page to make sure you’re on the right path. Just work slowly but surely.

Now that we have a pretty good template, I can concentrate working on the left nav section and making it look like the Photoshop image (adding menus, icons, etc).

5 Likes

Is it just me or does he look smug as all heck there? Just uh…just ignore that. AWESOME GUIDE! :+1:

Finished the navigation column, added Breadcrumbs, and stuff.

For the navigation icons, I used font-awesome.

Here’s the HTML code for the menu section and sub-menu section.

Nothing special, just some unordered lists and fontawesome icons embedded within anchor tags. Styling is done in CSS.

But a bad side-effect of using icons is it’s touching the menu text. They’re butted against one another.

Looks bad…

So we need to push that text a little bit to the right —>
We can use padding-right for this purpose.

So we take the .fa class and just add some padding-right to it in our own CSS file.

So now we have some spacing between the icons and our text.

And we’re DONE!

But WAIT!.. something doesn’t look right. The fontawesome icons have varying widths, and so our text is all over the place and not aligned consistently.

It’s very minor… but we need to show some pride in our work. We need to fix that.

What we can do is give the .fa class a consistent width. So let’s add that rule in our CSS.

Now, everything looks pixel perfect aligned.

Remember our original Photoshop mockup?

And now our finished HTML template.

Some minor difference from our original Photoshop mockup (breadcrumb format, and choice of icons), but overall I’m happy with this. The breadcrumb is sticky and stays in place when you scroll up. The Copyright footer is also fixed position and stays in that location no matter the browser size/height.

2 Likes

Just to add, font awesome has a built-in fa-fw class that gives the icons a fixed width (and centers the icons as well).

2 Likes

I didn’t know that. Thank you!