Blog & News
Site Relaunch - MVB Builder
I’m pleased to announce the relaunch of the Michael von Behren Builder, Inc. website.
When I was first starting out, MVB Builder was one of my first clients. They had an existing site at the time that I redesigned and also added some new feature too. Over the years the site had become stale and was in need of an upgrade. The main goals for the re-launch were to provide a dynamic content management system that the site could run from, improve the project gallery, and also clean up the content and layout to make it more fresh, and visually appealing.
For the content management system I rebuilt the site using Expression Engine. The site is driven by basic sections for static pages as well as the project gallery. The gallery received a number of enhancements including a dynamic project sorting feature, and improved image viewing. A number of these visual enhancements were made using the very powerful jQuery. The text and layout were also modified to reflect a cleaner, more professional look and feel.
With these enhancements, the MVB website will continue to be a great compliment to the overall Michael von Behren Builder, Inc. experience.
Posted on 04/25/2008 - Comments (0)
Clear Fire Studios site launches!
Although Clear Fire Studios has been in operation for a while now, I just haven’t had the time to get this site completed and launched. I was finally able to buckle down and get it done though. Usually when I work on my own personal projects I am never satisfied with the end result. I always want to keep tweaking and modifying. And even though this site isn’t a finished product, I am very happy with how it turned out.
The site is built on top of the wonderful Expression Engine, which I use for the backend of most of my projects. I’ve been using Expression Engine for a while now and am continually amazed at its flexibility and power. I also used the Blueprint CSS framework on this site. I had been wanting to code with it for a while and figured this would be a great project to test it out on. After looking through some of the documentation and samples I was amazed at how quick I was able to get the site layout and structure coded. I’ll definitely be using it again on future projects.
The goal of this site is to showcase the work I’ve done as well as the services I offer. I also hope to write on web design and development topics from time to time. Feel free to browse around and leave a comment if you like.
Posted on 03/15/2008 - Comments (3)
Tips for Organizing CSS Files
*This article is being reproduced from it’s original location on my previous site Casey Reid Design, http://www.caseyreiddesign.com/comments/tips_for_organizing_css_files.
Over the years I’ve tried a number of different approaches to organizing my CSS. I am an organized person by nature so doing it in my CSS kind of goes along with my personality. My methods have evolved over time and each project I work on, it seems I learn a new technique or approach. Here are some tips I use or have tried in the past to help keep my CSS files easier to manage and maintain.
1.) Separate code into sections
Use CSS comments and name the section appropriately. Doing this makes working with code much easier, especially if you need to go back and make some tweaks later on down the road. I usually break my code into these sections.
Link Styles
Common Classes
Layout or Structure Styles
Header
Navigation
Content
Footer
2.) Indent descendants and related rules
#mainContent {
float: left;
padding: 10px;
width: 500px;
}
#mainContent p{
color: #333;
font-size: 90%;
}
#mainContent #news{
color: #FFF;
}
This allows you more easily recognize page structure within your CSS and how elements relate to each other. This method can also be applied for a specific tag such as a heading tag.
h2{
color: #999;
font-size: 90%;
}
#mainContent h2{
color: #000;
}
#footer h2{
background-color: #FF9966;
font-weight: normal;
}
3.) Compress your Code to one line
Instead of having each attribute on its own line, have them all on the same line. This reduces the file size of your CSS file and also makes it easy to scan when trying to find a specific tag.
Instead of this:
p{
color: #999;
font-size: 90%;
margin: 5px;
padding: 10px;
}
Do this:
p{color: #999; font-size: 90%; margin: 5px; padding: 10px;}
4.) Alphabetize attributes
#nav{
background-color: #000;
color: #FFF;
float: left;
font-size: 12px;
margin: 10px;
padding: 5px;
}
This just seems to make my CSS easier to read when I’m scanning it or looking for something.
5.) Use shorthand wherever possible
This makes your CSS easier to read and understand and is much more efficient.
Use:
padding 5px 8px 4px 7px;
Instead of:
padding-top: 5px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 7px;
You can also apply shorthand for color where applicable. When a color consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#ffffff becomes #fff, #003366 becomes #036
6.) Reset your CSS
There are a ton of methods for resetting your CSS. I usually do this:
*{
margin: 0;
padding: 0;
}
Then I just apply padding and margins to the elements that need it. This is always a big help with layout issues. A more detailed reset stylesheet along with commentary can be viewed on Eric Meyer’s site. Yahoo also provides a reset stylesheet using their YUI library that you can actually link directly to from your CSS files. More information on Yahoo’s YUI reset CSS is here.
7.) Use separate CSS stylesheets for different elements
Have a main style sheet that you import others into. You could have a stylesheet just for typography, another for layout, and another for colors. By keeping these elements organized within their own style sheets this can make it easier to manage your code.
In your main CSS file import the other stylesheets.
@import url(/css/typography.css);
@import url(/css/colors.css);
@import url(/css/layout.css);
@import url(/css/print.css)
8.) Declare colors used at the top of your CSS files
Within CSS comments at the top of your file code the colors you are using in your file and the color they represent.
/* Color Declarations
#5db352 - light green
#06F - blue
#f03 - red
*/
If you have any tips or tricks for managing your CSS, please do share. I’m always looking for new ways to enhance my methods.
Posted on 03/01/2008 - Comments (0)
