JungleJar » CSS

A Closer Look at CSS Tab Designer

Christopher Hennis — Fri, 25 Sep 2009 04:38:17 +0000

Do you ever find yourself sitting in front of Photoshop for hours trying to mock up a decent navigation menu, or searching the web for the most aesthetically pleasing color palettes for your users to click on that doesn’t remind them of McDonalds or a funeral parlor?

Face it, sometimes we all lose our mojo for a moment or two, and then we are forced to validate ourselves not just to the W3C, but also to our website visitors, design clients and portfolio piranhas.

And then we remember that through the general kindness of a group of web designers and/or developers, and through organizations such as The Creative Commons who work to guarantee that kind freedom, we don’t always have to be the Picaso of style sheets.

CSS Tab Designer

CSS Tab Designer is a clean and very small desktop application for the Windows Operating System which doesn’t really bring much new to the drawing board, but what the application does nicely is it displays many various popular and well designed CSS menus, both vertical and horizontal. Some of which you’re likely to have seen on other websites, but through the flexibility of the menus’ respective Creative Commons Licenses, all have been incorporated into this small desktop application making it a snap to browse through over 60 designs to find that perfect one to serve as a base template to build upon, or to simply use as is.

In the image above (click for a better view) you can see how easily the program is set up and the true value of the program comes to life a bit.

If using a pre-designed CSS menu seems the better choice for you, you can simply select the design you prefer, edit your text links in the sidebar the application provides, and click the “Generate HTML & Images” button in the menu, and voila. You’ll have yourself a beautiful CSS menu completely customized to your needs with all of the images and XHTML valid code ready to be copy and pasted into your existing website.

The application isn’t all about using other designers’ CSS menus, although it absolutely prides itself on giving you that option. You can construct your own CSS menu with a bit of CSS (of course) and XHTML and view a live preview of how the menu might be interpreted by IE, Netscape, Opera, Firefox, Konqueror, Safari and Camino.

CSS Tab Designer is a freeware desktop application created by the OverZone Software development team.

Visit the official CSS Tab Designer webpage at OverZone Software.

CSS Tab Designer Contributors list.

List Of Markup Validation For Common Websites

Christopher Hennis — Wed, 16 Sep 2009 09:39:11 +0000

I was browsing the W3C Markup Validation Service entry on Wikipedia awhile back, and came across a very interesting little thing they did. They had the idea of checking a list of some of the most common or popular websites on the internet such as Google, Apple, AOL, MSN, etc.

What I saw back then was relatively surprising to me. What I saw today when I went back to that entry on Wikipedia was even more shocking as they updated their list by nearly double and only had one website to add to the ones that came back valid…

The above picture was the old snapshot that was taken off the W3C Wikipedia page. If I had to say, I would say it’s around a year old. Give or take a month or three.

The above image is the new snapshot taken off the W3C Wikipedia page. One of the first things I noticed was Google.com didn’t validate, and I can’t see why. I mean, the simplicity of the Google.com website, its main index, is incredibly simple with an image, a few lists, and a text area form.

I was even more surprised about Twitter and Apple not validating to the W3C standards.

In the article on Wikipedia concerning the W3C Markup Validation Service, it wasn’t stated whether the above websites were scanned for valid XHTML in Transitional Markup, Strict Markup or else. My best bet however is that they scanned these websites for Valid Transitional XHTML, as that gives the website being scanned a bit of head way, but certainly doesn’t make it a piece of absolute cake to validate.

Read about the W3C Markup Validation Service at Wikipedia

Visit the W3C Markup Validation Service

I also highly recommend reading the Help and FAQ for the Markup Validator as it answers most fundamental questions nearly anyone would have about what exactly the W3C Markup Validation Service is.

As defined by their very own FAQ..

” The Markup Validator is a free service by W3C that helps check the validity of Web documents.

“Most Web documents are written using markup languages, such as HTML or XHTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.

“Validating Web documents is an important step which can dramatically help improving and ensuring their quality, and it can save a lot of time and money Validation is, however, neither a full quality check, nor is it strictly equivalent to checking for conformance to the specification.”

Continue reading the official about page.

Saving Time While Publishing With Wordpress

Christopher Hennis — Wed, 01 Apr 2009 08:21:21 +0000

In this article I’ll give you a few tips that have helped me over a bit of time to save a bit of time. The fact that running a website and writing for it as well can require quite a bit of time and dedication, we all need new ways to help us publish and promote our articles quicker.

While this tutorial was written with a focus on the Wordpress CMS, I think any webmaster will be able to take something away with them from it.

Wordpress Codex – Author Edit Link

This is incredibly easy to add to your website. Just make sure you place it within The Loop, and you have it positioned where you’d like it.

This template tag can amount to a lot of time saved due to the fact you can edit your post on the fly from your index page, posting, or anywhere else you’d find the Wordpress Loop.

1	edit_post_link('link', 'before', 'after'); ?>

Example: Displaying the edit link in a paragraph tag..

1	edit_post_link('edit', ' ', ' '); ?>

The end result of adding in this little template tag is you’ll have to open up new browser tabs fewer times, and you will not have to go through your Wordpress Dashboard to find your pages and posts to manage. And don’t worry, only you will be able to even see the edit link.

Wordpress Plugin – Shortcut Macros (link takes you directly to the README file)

“This plugin allows you to set up shortcuts that expand into longer text when you save a post/page. For example, if you link to my site often, you might create a macro of ak. You type ##ak into a post/page and when you save it will expand to Alex King.”

I enjoy using this function while maintaining a certain bit of flexibility. With that said, I decided I could save loads of time when adding links here and there by creating a macro named ‘link’ that expands to .

Wordpress Plugin – RegLevel

“You can add a special link through which users can register and have a particular user level/role applied by default.

Need to separate people into multiple categories? Now you can automate the filtering process and save yourself time.”

While this plug-in should be just fine with your Wordpress 2.7.1 installation, this update was rushed and the author admitted so. The full release of the Wordpress 2.7.1 version is promised to be available in the coming months.

Useful CSS Classes For The Masses

I wrote a quick little tutorial for JungleJar around Halloween of 2008 teaching folks a little bit about global CSS classes, and I still believe this relatively easy practice isn’t nearly as often used as it could be. This article is not Wordpress specific.

If you’d rather just have a peek at the global CSS classes I provided with the tutorial to give users an idea of what I was explaining, have that peek below.

.alignleft { float:left }
.alignright { float:right }
.aligncenter { margin-left:auto; margin-right:auto; display:block } 
.clear { clear:both }
.float-left { float:left }
.float-right { float:right }
.text-left { text-align:left }
.text-right { text-align:right }
.text-center { text-align:center }
.text-justify { text-align:justify }
.bold { font-weight:bold }
.italic { font-style:italic }
.underline { border-bottom:1px solid }
.highlight { background:#ffc }
.img-left { float:left;margin:4px 10px 4px 0 }
.img-right { float:right;margin:4px 0 4px 10px }
.nopadding { padding:0 }
.noindent { margin-left:0; padding-left:0 }
.nobullet { list-style:none; list-style-image:none }

Wordpress Plugin – Post Templates

“It happens quite often that a blogger publishes posts or static pages on a regular basis which have the same structure. Think about for example a “picture of the day” daily post. With current wordpress state, we need to spend a lot of time doing copy/paste between posts instead of actually writing content. Be happy because I have developped the missing plugin to maintain post templates and allow simple writing of regular posts.”

3 Web Applications That Submit Your Posts To Social Bookmarking Communities

Looking to save a bit of time promoting your article to ensure it gets the proper attention it deserves? You might want to reference a previous JungleJar article entitled “3 Web Applications That Submit Your Posts To Social Bookmarking Communities“.

Mapping URLs to Filesystem Locations in Apache

Do you use the Apache Web Server? If so, this could save you a lot of time in itself. I’m not going to go over it too much in this article, because I believe it would take it too far out of its original context, and there are just too many different things you could use this for. So, just give a look over the document at Apache.org, and see if it might be something you’d be interested to give a go.

New Free Wordpress Template: vexed.box

Christopher Hennis — Fri, 27 Mar 2009 08:19:05 +0000

This is a clean Wordpress template capable of displaying large amounts of content without suffering aesthetically nor functionally.

FREE!
Valid XHTML 1.0 Strict
Valid CSS Level 2.1
Post images to the index page dynamically
Gravatar support
Wordpress 2.7.1 ready
2 Widget ready sidebars
Features a ’sticky’ post section above all of the other posts on the main page
Page links created dynamically as you create them in the admin panel
Comments now support paged navigation
2 Functioning Headers for flexibility
.PSD files included.
View The Live Page Demo
Download vexed.box Now

License: Attribution-Noncommercial-Share Alike 3.0 United States

Why should I donate?
Those who donate (and submit your email address) will receive FULL support for any downloaded template.
Having a more steady income means steadily I can progressively create more and better Wordpress templates.
The templates are free. I ask for a link back to JungleJar.com, no one chooses to do that barely, but it’s ok.
Chance to receive free (and sometimes exclusive) Wordpress templates that no one else has.
Receive our free JungleJar.com templates ahead of everyone else. You’ll be acting as a beta tester until the official release is dawned.
Randomly choose domain names from our portfolio. (We constantly are having them expire or just registering too many).
Free JungleJar.com tee-shirts, and more.
If you’re not sure what to donate, I would ask that you donate $5, but you are free to do as you’d like.

8 Free And Useful CSS Tools For Your Development Toolkit

Christopher Hennis — Sat, 14 Mar 2009 16:36:42 +0000

This is a nice collection I’ve put together of both online CSS web applications and desktop applications to assist the web developer with his/her project. Both the CSS veterans and beginners should find these tools useful and at least worth a bookmark or quick download.

CSS Typeset

CSS Typeset is an online web application, or tool, that makes it easy for anyone to change, tweak, and ultimately perfect text for their website. You simply pick your font type, font size, font color, line height, text alignment, and other various declarations for how you would like for your text to be displayed on your website, and CSS Typeset automatically generates the CSS needed for your website’s CSS file.

CSS Typeset is also great for those experienced hardcore stylists as not only does the web application simplify your job, but it also displays exactly how your text would look on a webpage by example. As you can imagine, this is a big time saving tool and nearly completely removes the guessing game of getting that text just right.

CSS Fly

“CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.”

CSS EM Calculator

The CSS EM Calculator was an online tool but was recently upgraded to an Adobe AIR application. Read below for more details on its usage..

Calculator for Vertical Rhythm in XHTML & CSS
Easily convert px to em based on base font-size and line-height
Copy CSS rules to your clipboard
Padding and margins automatically calculated

“The calculator defaults to a required base font-size of 12px and a 21px line-height. If you have set yours to be any different then please change this now. Some people prefer a line-height to be 1.5 x the base font-size, I personally prefer a larger 1.75 x the font size. It give more breathing space I feel.

Now you have set the base sizes you need to start adding some style rules, so click the button and the interface will expand down. Now give the style a name, this could be p orh1 or any standard rule or your own based on your markup. This name will be in the CSSand can be altered later.

The parent rule is there for creating cascading calculations. Font-sizes in emâ€™s are always based of the parent font-size. So if you need it itâ€™s there if not then leave it set to document base.

Next type your required font-size in pixels and push the calculate button. Your CSS will be there ready to copy to the clipboard and the options to add padding or margins that will live update in the CSS code. BEWARE that if you change your font-size you will need to click the recalculate button as all the other measurements are based off the font-size.

The margins and padding are in line height units, refer to the 24ways article for more understanding or send me an email if your stuck.

The final thing is that you have a simple em calculator for working out pixel to em values based upon the current set font-size. You could use this for working out the width of an element in emâ€™s. Where your design is say 120px you could get that value in emâ€™s. Just enter the pixel value in the box and it will auto calculate.”

CSS EM Calculator #2 – Online Tool

This is a simplified version of another CSS EM calculator.

“Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.”

CSS Tidy

CSS Tidy is a free application for Windows, Linux, and OSX.

“CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.”

CSS Font and Text Style Wizard

“Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.”

Table Border Style Wizard

“Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.”

CSS Button And Text Field Generator

CSS Button And Text Field Generator is an online application that takes the input you enter into its form and automatically generates the CSS code needed for your website.

28 Fantastic Web Design / Development Related RSS Feeds

Christopher Hennis — Mon, 02 Mar 2009 23:56:42 +0000

All of these feeds come from my own personal RSS subscription list. With these 28 Web Design and/or Web Development related RSS Feeds, you absolutely have an immense amount of resources and quality content automatically delivered to you, and the posts stay nice and fresh.

Delicious.com – Popular

This RSS Feed usually has a ton of web design and development related resources.

View the Delicious.com Popular Posts RSS Feed

DesignM.ag

View the Design M.ag RSS Feed – Articles Only

Dzine Blog

View the Dzine Blog RSS Feed

Greepit

View the Greepit RSS Feed

I Love Typography

View the I Love Typography RSS Feed

iyecon .com

View the iyecon RSS Feed

My Ink Blog

View the My Ink Blog RSS Feed

Noupe

View the Noupe RSS Feed

Specky Boy

View the Specky Boy RSS Feed

Pro Blog Design

View the Pro Blog Design RSS Feed

Sitepoint

View all of the possible Sitepoint RSS Feed Subscriptions

Six Revisions

View the Six Revisions RSS Feed

Think Design Blog

View the Think Design Blog RSS Feed

Vandelay Design

View the Vandelay Design RSS Feed

Velvet Blues

View the Velvet Blues RSS Feed

Garcya – Web Design Blog

View the Garcya – Web Design Blog RSS Feed

Web Appers

View the Web Appers RSS Feed

Web Designer Depot

View the Web Designer Depot RSS Feed

WebToolKit4Me

View the ToolKit4Me RSS Feed

Woork

View the Woork RSS Feed

Four Free CSS Valid 2.1 + XHTML Valid 1.0 Based Wire-Frame Templates + Tutorial

Christopher Hennis — Wed, 18 Feb 2009 12:18:34 +0000

In this article I’ll feature four CSS 2.1/XHTML 1.0 based templates created by me. These templates adhere to current web standards and validate as such by the w3.org. I’ll also teach you exactly how I created these website frameworks. This tutorial would be great for someone who would like a quick and easy way to introduce themselves to CSS/XHTML with the focus being on typical website layouts.

Create your CSS file – I name my own CSS file style.css only by habit from creating Wordpress based website’s and website templates. Name your own whatever you’d like.

Create your HTML file – Create an index file ending in a .HTM or .HTML extension. If you know already a better extension for the file, for example, if you use a content management system which makes use of .PHP files, name it .PHP. Since these files are just frameworks, there should be no issues at all with using these templates with anything.

While reading the tutorial below, click any template’s screenshot to view the actual CSS/XHTML markup in your web browser.

Template #1 – Header, Left Sidebar, Content Area, Footer

:The CSS File

body { 
 background:#fff; 
 width:1000px;    
 height:auto;     
 margin:auto    
}
 
.wrapper { float:left; width:1000px; height:auto; margin:auto }
 
.header { background:#c0c0c0; width:1000px; height:auto; min-height:150px }
.sidebar { background:#c7c7c7; float:left; width:200px; height:auto; min-height:300px }
.content { background:#e1e1e1; float:right; width:800px; height:auto; min-height:300px }
.footer { background:#000; float:left; width:1000px; height:auto; min-height:25px }

Above is what I’ve used to set up the body’s styling via CSS. As such, this bit of code would go into your style.css.

body – Everything inbetween the curly braces sets various style attributes to be displayed when the tag is displayed in our .HTM (or .HTML, whatever you’d like really these days. Just know what you’re doing.) file.

background: sets our main background to white
width: sets the main width of our content area. I mainly set this to a fixed width of 1000 pixels just so the automatic centering of the website occurs on all web browsers
height: sets the height of the document to auto which will enable it to expand as needed
margin: sets the left and right margins to an automatic value used to calculate distances for when the website is centered in various web browsers.

.wrapper – This is an element I usually create for a few reasons. One, it helps with the cross browser compatibility issues found today with mostly IE, but also all web browsers. Two, it would allow me to style another layer of my website. For example, if I wanted, I could set the background of the wrapper class to #000 which is the octal value for the color black.

.header – This contains the header.

.sidebar – Styles my sidebar.

.content – Styles my main content area.

.footer – Styles my footer area.

The only new tag to be aware of for the rest of the classes was my use of ‘min-height’. This is a value I normally use when first building my CSS classes so that I can better judge measurement between it and its surrounding objects. As you may have guessed, this sets a minimum height to my CSS classes.

:The XHTML File




JungleJar.com - CSS & XHTML based template



	

 



 
Header
 


 
Sidebar
 


 
Content
 


 
Footer

I’m not going to go too into detail with certain aspects of the header we have here below. If you would like to learn further, I would highly suggest w3schools.com. I would have went into further detail; however, I wanted to watch the size of this article and also it gives me something to write later.

1
2
3

The above bit of code sets the Document Type of our, well, document.

States that we’ll be using XHTML.

Head profile.

1	JungleJar.com - CSS & XHTML based template

Everything in between the title tags is set as the title of our website. Most notably what you see at the very top of your browser window next to its application icon.

1
2
3

Meta-Tags

1
2
3

This calls our CSS stylesheet. In this case: style.css

1
2
3

Specifies we no longer will have any information associated with our head, or header, and that we would also like to begin defining our body.

1
2

Opens our wrapper and our first inner CSS element which is our header.

1
2
3

Header

Displays the word “Header” in a h1 tag or Header One tag, and then we close our header class.


 
Sidebar

Open our sidebar class, display the word “Sidebar” in a h2 or Header Two tag, and then we close our sidebar class.


 
Content

Opens our content class, displays the word “Content” in a h2 or Header Two tag, and then we close our content class.


 
Footer

Opens our footer class, displays the word “Footer” in a h5 tag or Header Five tag, and then we close our footer class.

1
2
3

Next we close our wrapper class, close our body tag, and close our html tag.

Template #2 – Header, Right Sidebar, Content Area, Footer

:The CSS File – What Changes?

For the rest of these tutorials, only the CSS classes .sidebar, .sidebar2, .sidebar3, and .content will be altered.

In Template #2, the following CSS classes change..

1 2	.sidebar { background:#c7c7c7; float:right; width:200px; height:auto; min-height:300px } .content { background:#e1e1e1; float:left; width:800px; height:auto; min-height:300px }

The sidebar class now is set to float to the right of the content class which now floats to the left of all other CSS classes.

:The XHTML File – What Changes?

For the rest of these tutorials, only the XHTML code which calls on the CSS classes: .sidebar, .sidebar2, .sidebar3, .content will be changing. These classes are opened and closed in our HTML file with the DIV tags. For instance, the CSS class .sidebar is opened and closed with the following code..

1	opens it and the following closes it:

For Template #2, the following lines of code have changed..


 
Content
 


 
Sidebar

I didn’t have to, but I moved the sidebar to where it was called after the .content class. I did this just to kind of show myself before hand where the sidebar is most likely located even before I see which ways things are floating.

Template #3 – Header, Right Sidebar, Left Sidebar, Content Area, Footer – The infamous three column.

:The CSS File – What Changes?

The following lines of CSS code change..

1
2
3

.sidebar { background:#c7c7c7; float:left; width:200px; height:auto; min-height:300px }
.content { background:#e1e1e1; float:left; width:600px; height:auto; min-height:300px }
.sidebar2 { background:#800080; float:left; width:200px; height:auto; min-height:300px }

The .content class has been downsized to 600px in width, we added the .sidebar2 class which we’ll be calling in our XHTML file, and all classes now float left.

:The XHTML File – What Changes?

The following lines of XHTML have changed…


 
Sidebar
 


 
Content
 


 
Sidebar 2

All that really changes is the sidebar class is called first again, the content class floats in the middle, and we’ve called on our sidebar2 class to finish the three column layout.

Template #4 – Header, Three Sidebars, Content Area, Footer – The four column.

:The CSS File – What Changes?

The following CSS classes change..

.sidebar { background:#c7c7c7; float:left; width:200px; height:auto; min-height:300px }
.content { background:#e1e1e1; float:left; width:400px; height:auto; min-height:300px }
.sidebar2 { background:#800080; float:left; width:200px; height:auto; min-height:300px }
.sidebar3 { background:#ff0000; float:left; width:200px; height:auto; min-height:300px }

Our content class is now only 400 pixels in width, and we’ve added a new CSS class for the third sidebar we’ve included in our XHTML file.

:The XHTML File – What Changes?

The following XHTML lines have changed..


 
Sidebar
 


 
Content
 


 
Sidebar 2
 


 
Sidebar 3

We first call our sidebar, then our content area, then our second sidebar, and finally, third sidebar to complete the four column layout.

Download all four of these CSS/XHTML framework templates from JungleJar.com

The Woork Handbook – A Free Web Design / Development E-Book

Christopher Hennis — Sat, 14 Feb 2009 16:02:56 +0000

From the official website: “The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork!”

“The Woork Handbook” is essentially a collection of some of the finer posts written by a Mr. Antonio Lupetti on his blog: http://woork.blogspot.com/, and the general concept of the book is kind of cool. I would actually prefer a book such as this over an insanely technical manual, or a rambling comedy of a tutorial that goes on for 500 pages.

If you aren’t big on any of the .PDF readers for the local machine available out there, you can read this e-book online at Scribd by pointing your browser to: http://www.scribd.com/doc/9726157/The-Woork-Handbook

If you can handle the .PDF-ness of it all, you can download this e-book from the official website at: http://www.box.net/shared/static/xe3d9r4nti.pdf

You can also download this e-book at JungleJar by pointing your browser to: http://www.junglejar.com/downloads/ebooks/the_woork_handbook.pdf

SitePoint Updates Their Online Reference And FireScope Is Born

Christopher Hennis — Tue, 27 Jan 2009 10:02:04 +0000

I received an e-mail from Sitepoint.com around 10 minutes ago, and what I originally thought was one of their newsletters I subscribe to was soon realized to be a bit more than that.

SitePoint has re-designed and improved upon their online reference. One of the improvements was the release of the Web Design & Development website’s eagerly anticipated JavaScript reference.

From the e-mail.. “To coincide with the launch of the redesigned Reference Site, we’re
also proud to announce that HTML and CSS reference information is
now at your fingertips with the release of FireScope — a Firefox
add-on that integrates HTML and CSS reference information with your
browser.”

The official Mozilla Firefox Addons Release Page for FireScope

The official release page of FireScope at Sitepoint.com

From the website.. “FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.”

The official website of the FireBug Firefox Plugin

You guys go check this out — this is really something nice.

The official FireScope release page at SitePoint.com

15 Absolutely Fantastic Japanese-Based Web Designs

Christopher Hennis — Mon, 29 Dec 2008 03:20:42 +0000

Japan rocks.

All of the below designs are Japanese oriented — meaning they are either a clear sign of Japanese influence, or they are created by Japanese webmasters, or both.

JungleJar » CSS

A Closer Look at CSS Tab Designer

CSS Tab Designer

Related posts on JungleJar:

List Of Markup Validation For Common Websites

Related posts on JungleJar:

Saving Time While Publishing With Wordpress

Related posts on JungleJar:

New Free Wordpress Template: vexed.box

Related posts on JungleJar:

8 Free And Useful CSS Tools For Your Development Toolkit

Related posts on JungleJar:

28 Fantastic Web Design / Development Related RSS Feeds

Garcya – Web Design Blog

Related posts on JungleJar:

Four Free CSS Valid 2.1 + XHTML Valid 1.0 Based Wire-Frame Templates + Tutorial

Template #1 – Header, Left Sidebar, Content Area, Footer

Header

Sidebar

Content

Footer

Header

Sidebar

Content

Footer

Template #2 – Header, Right Sidebar, Content Area, Footer

Content

Sidebar

Template #3 – Header, Right Sidebar, Left Sidebar, Content Area, Footer – The infamous three column.

Sidebar

Content

Sidebar 2

Template #4 – Header, Three Sidebars, Content Area, Footer – The four column.

Sidebar

Content

Sidebar 2

Sidebar 3

Related posts on JungleJar:

The Woork Handbook – A Free Web Design / Development E-Book

Related posts on JungleJar:

SitePoint Updates Their Online Reference And FireScope Is Born

Related posts on JungleJar:

15 Absolutely Fantastic Japanese-Based Web Designs

Type: Standard

Type: Flash

Type: Standard

Type: Standard

http://www.n-keitai2.com/pickup/n705imyu/special/

Type: Flash

Type: Standard

Type: Standard

Type: Flash

Type: Flash/Standard

Type: Standard

Type: Flash / Standard

Type: Flash / Standard

Type: Flash / Standard

Type: Flash

Type: Flash

Related posts on JungleJar: