Why I Create This While I Can Download Others?

I am so stubborn, I don’t want to follow others! ( just kidding ). I notice that most of the CSS Grid System have lots of extra classes of elements. It is good and handy but is it really useful for your project? So, I try to create a very simple CSS Grid System just for blog or small website. So, this can be a little different from what you see in other popular framework. You can find all popular css grid system from the Grid System Generator.

Introduction

MyCSS Grid System is using the maximum of 960px width. It comes with the most common layout proportion for blogs and creative web sites. It is also using the best divine proportion in web design. This may not that useful compare to those well built css grid system but I think it somehow do the job.

How It Works?

In the download files, there are:

• index.html
• grid.css
• format.css

You can start coding your project by including the grid.css.

Codes Preview

The grid.css, I am using my name as the first and the last div (Easy to remember, every time you use this system, you will remember my name! Hehe.. So, the first div from the left has a class name “kai”, the last div on the right will has a class name “loon”. So, “kailoon to complete the work!”.

* { /* CSS reset, you can replace with your own css reset codes*/
	margin: 0;
	padding: 0;
}

.b1 { width: 640px; }
.b2 { width: 300px; }
.b1 .b1 { width: 310px; }
.g1 { width: 580px; }
.g2 { width: 360px; }
.g1 .g1 { width: 280px; }
.g2 .g2 { width: 170px; }

.col {
	float: left;
	margin: 0 10px;
	display: inline;
}

.box {
	margin: 0 auto 20px;
	width: 960px;
}

.kai { /* The first left component*/
	margin-left: 0;
}

.loon { /* The last right component*/
	margin-right: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

The HTML:

<div class="box clearfix">
		<h1>960px - Normal Blog Layout</h1>
		<p>960px</p>
</div>

<div class="box clearfix">
	<div class="col b1 kai">
		<p>640px</p>
	</div>
	<div class="col b2 loon">
		<p>300px</p>
	</div>
</div>

<div class="box clearfix">
	<div class="col b1 kai">
		<div class="col b1 kai">
			<p>310px</p>
		</div>
		<div class="col b1 loon">
			<p>310px</p>
		</div>
	</div>
	<div class="col b2 loon">
		<p>300px</p>
	</div>
</div>

<div class="box clearfix">
	<h1>960px - Golden Divine Proportion Layout</h1>
	<p>960px - The Golden Divine</p>
</div>

<div class="box clearfix">
	<div class="col g1 kai">
			<p>580px</p>
	</div>
	<div class="col g2 loon">
			<p>360px</p>
	</div>
</div>	

<div class="box">
	<div class="col g1 kai">
			<div class="col g1 kai">
				<p>280px</p>
			</div>
			<div class="col g1 loon">
				<p>280px</p>
			</div>
	</div>
	<div class="col g2 loon">
			<div class="col g2 kai">
				<p>170px</p>
			</div>
			<div class="col g2 loon">
				<p>170px</p>
			</div>
	</div>
</div>

Conclusion and Download

It is simple and easy to use as it is very specific. The CSS file size is extremely small, only 778 bytes!. You can preview the demo here. If you have any questions or you find any bugs or you have any suggestions, please feel free to leave a comment. If you find this useful, let me see how / where you implement it. Thanks!

Mission

Before this, I’ve release a tutorial about the CSS sliding door using only 1 image. I will extend from there and what we need to do is to modify some codes. Before that, you can
.

Step 1 – HTML Structure

Let’s start here. This is a basic structure that we need. We need to put everything inside a div that we are going to control using the javascript. Here we use #tab. The beauty of Savvy UI is that the title of the div will be the anchor text for the tab buttons. The x-simpletab-panel is a pre-built class for the tab button within the system to make sure that the content within the div will be included in the tabbing system.

<div id="tab">
	<div id="tab-home" title="Home" class="x-simpletab-panel">
        <!--content goes here-->home content
        </div><!--tab-home end-->

	<div id="tab-products" title="Products" class="x-simpletab-panel">
        <!--content goes here-->products content
        </div><!--tab-product end-->

	<div id="tab-blog" title="Blog" class="x-simpletab-panel">
        <!--content goes here-->blog content
        </div><!--tab-blog end-->

	<div id="tab-contact" title="Contact" class="x-simpletab-panel">
        <!--content goes here-->contact content
        </div><!--tab-contact end-->
</div>

Step 2 – CSS

For the css part, we will need to create something to suit the system. There will be several auto-generated class for the ul, li and div that we use.

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

.simpletab-toolbar-container { /*container for the tab buttons*/
	float: left;
	width: 100%;
}

ul.simpletab-toolbar { /*auto generated ul with specified class */
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #fff;
	float: left;
	clear: left;
}

ul.simpletab-toolbar li {
	float: left;
}

ul.simpletab-toolbar li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ul.simpletab-toolbar li a em { /*auto generated em, the useage is same with what we used for the sliding dor as span */
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

ul.simpletab-toolbar li a:hover {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}

ul.simpletab-toolbar li a:hover em {
	background: url("images/blue.png") no-repeat top left;
}

ul.simpletab-toolbar li a.current {
	background: url("images/blue.png") no-repeat top right;
 	color: #0d5f83;
}

ul.simpletab-toolbar li a.current em {
	background: url("images/blue.png") no-repeat top left;
}

.simpletab-container { /*auto generated class for the content container */
	margin-top: 10px;
	float: left;
}

.simpletab-container .simpletab-active { /*auto generated class for the active content container */
	display: block;
}

.simpletab-container .simpletab-hidden { /*auto generated class for the in-active content container */
	display: none;
}

Step 3 – Download the Library and Implement

We need to build the Library that we need and implement into the codes. What we need is only the Simple Tab under Utilities. Then, implement into our system.

<script type="text/javascript" src="savvy-build.js"></script>
	<script type="text/javascript">
		SUI(document).ready(function(){
    		new SUI.Util.SimpleTab("#tab");
		});
	</script>                                

/*before the head close tag*/

The result so far.

Step 4 – Structure The Contents

Now, let’s try to add in some content and style it in what you like. Below is my example for it.

<h1><a href="#">Simple Tab Using Savvy.UI</a></h1>
<div id="tab">
<div id="tab-home" title="Home" class="x-simpletab-panel">
<div class="content">
<h3>Home</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-home end-->

<div id="tab-products" title="Products" class="x-simpletab-panel">
<div class="content">
<h3>Products</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-priduct end-->

<div id="tab-blog" title="Blog" class="x-simpletab-panel">
<div class="content">
<h3>Post Title 1</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-blog end-->

<div id="tab-contact" title="Contact" class="x-simpletab-panel">
<div class="content">
<h3>Contact</h3>
<div class="post">
<p><!--content goes here--></p>
</div><!--post end-->
</div><!--content end-->
</div><!--tab-contact end-->

</div>

Step 5- CSS Again

After that, apply some CSS for it.

#tab {
	clear: left;
	width: 100%;
}

.content {
	border: 1px solid #59b9e8;
	background-color: #e0eef4;
	margin-bottom: 15px;
}

.post {
	padding: 0 10px;
}

h3 {
	background: url(images/header.png) repeat-x top left;
	height: 30px;
	font: 900 20px "Times New Roman", Times, serif;
	color: #fff;
	margin: 0;
	padding: 2px 0 0 10px;
}

body {
	padding: 20px;
	margin: 0;
	color: #666;
	font: 400 80%/150% Verdana, Arial, Helvetica, sans-serif;
}

p {
	padding: 0 0 12px 0;
}

h1 a {
	font: 900 200% "trebuchet MS";
	color: #59B9E8;
	letter-spacing: -1px;
	margin: 0;
	text-decoration: none;
}

h1 a:hover {
	color: #09f;
}

Conclusion and Download

It is simple and easy to do. Again, here is the end result. And below is the download for the source files that I used. Cheers!

The Image

Concept

The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.

HTML

<ul class="blue">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="products">products</a></li>
    <li><a href="#" title="blog">blog</a></li>
    <li><a href="#" title="contact">contact</a></li>
</ul>

Now, I add in a <span> for each of the link to hold the left hand side of the background image.

<ul>
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

CSS

1. <ul> – Unorder-List

ul {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

ul li {
	float: left;
	display: inline; /*For ignore double margin in IE6*/
	margin: 0 10px;
}

ul li a {
	text-decoration: none;
	float:left;
	color: #999;
	cursor: pointer;
	font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
	margin: 0 10px 0 -10px;
	padding: 1px 8px 5px 18px;
	position: relative; /*To fix IE6 problem (not displaying)*/
	float:left;
}

We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the <span> and also <li>. I am not going to define a width for it because this is just a sample.

4. <Hover> – mouse over action

ul.blue li a.current, ul.blue li a:hover {
	background: url(images/blue.png) no-repeat top right;
 	color: #0d5f83;
}

ul.blue li a.current span, ul.blue li a:hover span {
	background: url(images/blue.png) no-repeat top left;
}

Since we are going to have the same effect for the mouse over and active link. I combine the codes.
Here is another example with 4 colors.

Compatibality, Conclusion and Download

This script has been tested in IE6, 7, Firefox 3.5.5, Safari and Google Chrome. This is a very useful technique which you can re-use in page with only 1 image. It is easy to use and I hope that you guys can understand my poor English explanation. Any question, just send me an email or drop me a comment here.

Update ( 10th Decemeber 2009 )

Thanks Dimitar Yanev for the advice to not using empty tags, I decided to update the codes. I hope you guys enjoy this little trick!

Kai loon said:

“HTML is the parents and CSS is their child, CSS has beautify his parents life since he was borne. Now, The kids grow up and can have their own career but still they are under protection by their parents.”

xaer8 said:

“HTML code is like the face, while CSS code is like the make-ups. Without make-ups, you won’t look pretty.”

sandersky said:

“html is like a pclear condom while css is a green glow in the dark coating. it makes the condom a lot more attractive and less plain.”

So, how about you? Mind to share your unique descriptions?

How Kai Loon See CSS in His Life?

Kai Loon is a CSS lover, so, I will not want to waste this chance to learn more and enhance my skills in writing CSS. CSS is a beautiful language for me and I like it very much. It drives me to the web design field from graphic designer. It gives me a name as a CSS Designer. So, I need to work hard to make the title worth.

What I ‘d Experienced There?

About CSSMates, I found that the forum layout is simple enough to navigate. But the design really need some enhancements. Maybe they are still undergoing the development? There is an error when I post up a new topic or comments with attachments. I can’t post with any attachments. I hope they can fix it later or give users a guide on how to use their tools. User friendly interface is always a key features for a successful.

Conclusion

Anyway, it is a good place for the CSSer to discuss and exchange idea. It is always a good idea to gather all the people with same interest and boost up the knowledge and skills developments. I hope that I can learn something useful there and also help those newbie or whoever facing any CSS problems. You may also ask here in LoonDesign if you don’t mind. Ok, happy posting in CSSMates!

1. FONT

Usually, we beautify font with several line of codes like this :

h3.my {
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial", Helvetica, sans-serif;
	color: #333333;
	line-height: 24px;
}

<h3 class="my">Loon Design</h3>

Do you find the code is a bit too messy or too long? Here is my solution for them:

h3.my {
	font: 900 160%/240% "Arial", Helvetica, sans-serif;
	color: #333;
}

<h3 class="my">Loon Design</h3>

Will this cut down your coding time? The output will be:

Tips

• The order of the attributes are font: weight size/line-height family;
• 400 = normal and 900 for bold

2. Margin and Padding

Wondering what how to differentiate them? You check this site for details. We use margin and padding most of the time when we write up the codes. However, I am not to say the padding problem with IE6 ( seriously, I am having a bad time with IE6 during my work, may post it out later ) here but try to give you some tricks on how to make it in 1 line.

Normally, we code like this, we take margin as example :

.my {
	margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 5px;
        margin-right: 5px;
}

but now we can make it in 1 line like this :

.my {
	margin: 10px 5px 20px 5px;
}

Tips

• margin: top right bottom left;
• or when you have the same margin for the top and bottom, it become like this : margin: 10px 0;
• while margin: 0 auto; means vertically align.

3. Class and ID

the symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID
• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
• We consider that it has the higher level than class. It is more specific.
• can be used and an anchor name.

Class
• Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

4. Ignore by IE – !important

This is a trick to write something that ignore by IE but can be run in all browsers. The attributes before the !important will be ignored by IE.

Example: margin: 20px !important; margin: 10px;

There will be 20px margin for all browsers except IE which will have the 10px margin. This is useful when you doing some positioning adjustments and most of the time it is showing different result in IE browser.

5. Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

Block
• Always begin on a new line.
• Height, line-height and top and bottom margins can be manipulated.
• Width defaults to 100% of their containing element, unless a width is specified.
• Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements
• Always begin on the same line.
• Height, line-height and top and bottom margins can’t be changed.
• Width is as long as the text/image and can’t be manipulated.
• Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

Conclusion

Well, that’s all I wish to share with you guys. Feel free to drop me a message if you find any question about the provided tricks. Thanks!