Developing a CMS Site. Part2: Coding Structure

Now we dive into what I do best.. front-end web development and User Interface! If you’re a regular visitor to my site, you’ll notice that for the past three months I’ve had a pretty dull site, and have slowly been refining it. I’m going to aim this post not so much as a “how to” but more as a “how I” because it’s sometimes easier to look at the steps someone takes on a real project, than it is to be told steps to follow without having something tangeable to link to.

In the early design phase, I had a really vague idea of what I wanted my site to be, but I didn’t want it to be “typical” and I hadn’t really seen a site that matched what I was going for. I still started first by looking around at what I liked in other sites, and thinking of how I could incorporate that into my own. Then after the first week I happened to come across a theme that was absolutely gorgeous, by Darren Hoyt and Matt Dawson and used it as my base for development. I love the grid, the structure and the User Interface that this layout has. My approach is once you’ve established your frame, UI, and grid; you can slowly add creative enhancements as you go (at least that’s my preferred approach, some designers and such may argue it, depends on the scope really).

After I applied the new theme, I began my breakdown approach by changing the color scheme, and re-adjusting some of the positions/sizes/padding/etc on the elements of the page. For example, I wanted larger font sizes, better font spacing, a different color scheme, etc. Once i had the theme, I started making the modifications to the style sheets. Most themes will use just one or two stylesheets, editable within WordPress itself under the Design tab, or within the wp-content/themes/yourtheme if accessing the site via FTP. Style are typically labeled style.css or separated into different layout styles like nav.css, type.css, posts.css and so forth.

HTML and CSS

For those of you that are just starting out, I want to go over some basics so that I don’t lose you further down the road. I’m sure if you’ve been reading anywhere on how to make a website you’ve seen the acronyms HTML and CSS. These are two extremely important pieces to front-end development. They define structure and how to present structure.

HTML stands for HyperText Markup Language, which basically means it’s transferable content. HTML serves as the structure of a website. If HTML were part of a building a house, it would be the lumber, doors, windows, drywall, etc.

CSS stands for Cascading Style Sheets, which means transferable/reusable styles. CSS serves as the display of a website. If it were part of building a house, it would be the overall blueprint and floor plan, as well as the paint, trim and furniture.

Hopefully my analogies make sense.. moving forward.

Using CSS to layout your site

So if you downloaded a theme and opened the main CSS files, you’ll see that some of it just clicks. Things like “background-color” are literal to what they’re styling. The hardest part to CSS isn’t colors and fonts, but more in layout like sizes, margins, and paddings. I’m not going to define all the style definitions, but like I said before, CSS is both the blueprint and the paint, so some styles relate to structure and some relate to skin.

The best way to learn CSS is to mess around. The basics that you need to know are elements, classes and ID’s. Elements are HTML defined content, such as <p> paragraph tags, <div> structure tags, <ul> lists, <h1> headers, etc. Classes can be attached to these tags like <p class=”redtext”> in HTML and to style that in the CSS you would define the paragraph tag with the class redtext be writing p.redtext { color: red; } in the style sheet. The period represents the class and the p represents what element that style is attached to. To style all paragraph tags we could simple drop the class and write p { color: red; } because then we’re simply targeting the paragraph element. This principles works the same with id’s which are represented with a # symbol. The difference between an id and class is that a class can be used multiple times in a single page and an ID can only be used once.

Homework

For this next week, try to learn some CSS basics. If you’re a beginner, work from a theme that someone already did the hard part of laying out, and just change colors or adjust sizes slightly and tweak it until your happy. Try and get the site styled with the colors you like and sizes you like. If it looks boxy and boring, that’s GOOD. We don’t want to focus on the creative elements more than we focus on the layout and structure yet.. that comes with time.