WebDev3000 » CSS

Tiny Fluid Grid

Codrut Nistor — Tue, 01 Jun 2010 09:04:03 +0000

A few years ago, resolutions used by people going online were only a few, so designing sites using fluid layouts wasn’t something you had to do to be sure everyone’s happy. With the large scale introduction of wide resolution monitors, mobile devices like the iPad or the netbooks, fluid design became much more important, and so happened with tools created to help you get this job done. Today, we’ll talk about Tiny Fluid Grid, pictured below.

Tiny Fluid Grid was inspired by the 1KB CSS Grid and allows you to easily create fluid grids in just a few minutes, while offering the chance to customize three variables of the output: number of columns, min & max width, as well as gutter percentage.

Covered by the terms of the CC License, Tiny Fluid Grid can be downloaded as a package containing the index.html file with demo code, and the grid.css containing the CSS for the fluid layout you just created.

Compatibility: The online tool and the generated code itself should work with all major Web browsers.

Baseline

Codrut Nistor — Thu, 03 Sep 2009 07:12:59 +0000

To be honest, I don’t think design can be done without using some guides, at least from time to time. Sure, most designers have a different way of seeing things than “normal” people, but I don’t think any of them has any guidelines inside the head… because this is today’s subject, and the tool to come with it is simply called Baseline.

Keeping typographic standards in mind, the guys from ProjetUrbain.com built Baseline with the goal of making website development easier. Sure, there are plenty of methods to ease your development work, but Baseline does it by offering a nice grid and a typographic layout to play with, bringing order into a world full of chaos.

Fully compatible with the latest versions of all major browsers, including Safari, Firefox, and even Opera, Baseline takes advantage of the font metrics instead of regular line height to line up major page elements, such as paragraphs, buttons, form labels and so on.

Licensed under the terms of the Creative Commons license, Baseline comes as a fully featured package, including CSS files for deployment and development, a complete set of HTML examples and templates, and even a Photoshop base document!

Compatibility: all major browsers, including Google Chrome and Safari

Kwicks

Codrut Nistor — Wed, 19 Aug 2009 06:23:20 +0000

Some time ago, creating menus for a site was nothing less but art. I only said “menus,” yes? Good, because when talking about animated menus, we were already stepping into “Voodoo land” already, at least for most people using the Internet back then! Now, creating animated/dynamic menus has become a trivial task, and Kwicks is here to prove that.

Since this time there’s no big story to tell, let me tell you only this: Kwicks is a jQuery plugin that allows you to create horizontal menus with a nice sliding effect like MooTools, but also succeeds in being more versatile and customizable. If the image above is not enough, take a look at the demo and you’ll get the idea…

To learn how to use Kwicks, you should take a look at the official page I mentioned in the first paragraph, and since we’re only talking about basic HTML/CSS coding here… I am sure you’ll manage to create very good looking menus with this free piece of code that is Kwicks. Good luck to you all!

Compatibility: all major browsers, but beware – if JavaScript is disabled, your menu won’t be animated at all, you’ll only get plain text links and nothing more!

Nifty Corners Cube

Codrut Nistor — Fri, 07 Aug 2009 16:38:34 +0000

Coding stuff can easily replace graphics design work in some cases, and rounding corners is one of those cases. I don’t know about you, but I bumped into some browser-related issues with corners nicely rounded in a Photoshop file that was cut into HTML code with nicely sliced images from the PSD template more than once, and it gets so frustrating, that even once is a few times too many!

What to do? CSS comes to save the day, and today’s hero is called Nifty Corners Cube! Basically, the idea is to use Nifty Corner’s CSS powers and obtain rounder corners without using a single image. Sure, some may be great at slicing PSD templates and then spending countless hours to detect browsers and make everything look perfect in IE, Opera, Firefox and the others, but if you can go for something easier… why not?

Nifty Corners Cube reached third version way back in 2006, but I think it’s still something worth checking out, since it comes covered by the terms of the GNU GPL licence, so you can mess with the code as you wish. A lot of info about how to use this piece of code is available on the official page, so I will end this here and hope you’ll find Nifty Corners Cube useful.

Compatibility: all major browsers, and then some, as you probably figured out already

Spiffy Corners

Codrut Nistor — Wed, 22 Jul 2009 09:08:39 +0000

Some time ago, I was talking about very simple tools that come with a single purpose, and those online behemots some love while others hate, like the SEOmoz tools package, for example. Now, the time has come for another really straightforward tool, namely Spiffy Corners, sometimes referred to as Rounded CSS Corners.

Since I already told you about the “nickname” of Spiffy Corners, the secret is no longer a secret – this online tool helps you easily create a box with rounded corners using CSS. That’s it!

Of course, there are a few things to set, like class name, background and foreground colors, border size, but once you set those, you get your CSS & HTML code right away, and all that remains is to paste it into your project.

These being said, I guess we’re done with this one. Since giving it a try will only kill one minute of your time, I think there’s no reason to avoid Spiffy Corners, as long as you’re using CSS to bring some color to your sites…

Compatibility: any major browser, I guess, since there’s nothing clearly specified about this on the product page, and I had no problems in Opera, Firefox, Safari, or IE8

ColorBox

Codrut Nistor — Fri, 17 Jul 2009 05:13:29 +0000

Considering the fact that we’re in 2009, and not 1995, delivering pictures on your website in a nice outfit is one of those things you shouldn’t miss. After all, with tools like ColorBox around, adding frames or slideshows becomes a real pleasure, so why not go for it?

The idea behind ColorBox is very simple – you have a 9KB worth of JavaScript code jQuery plugin that’s highly customizable and very easy to use, and you allow it to help you add single photos, photo groups, create slideshows, iframed or AJAX content, all by adding a few words to your existing code.

Even more, ColorBox preloads background images to avoid flash of unstyled content when loaded for the first time, while upcoming images in a photo group can also be preloaded.

Released under the terms of the MIT license, ColorBox generates W3C valid XHTML and CSS code, so everything looks more than fine from my point of view. If you see things different, don’t hesitate to drop a comment below, all right? That’s it, folks!

Compatibility: according to the official page, ColorBox has been tested in Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8

TypeTester

Codrut Nistor — Wed, 15 Jul 2009 08:50:30 +0000

Choosing the right font and general text styling can be a real pain sometimes, and that’s why I decided to tell you about TypeTester, a free online resource that’s more than just a dummy text generator, allowing you to easily pick the best settings for your ongoing projects involving a lot of text areas.

With TypeTester, there’s no need to create any kind of account or to download some piece of code – all you have to do is open the site, enter your sample text (or just use the default dummy paragraph already available), and then mess with the settings.

Apart from being able to choose base font size and font, you can also pick various column settings, like size, leading, tracking, alignment, or color, and the best part of it all is that you can have three different settings side by side to make choosing the right one easier.

At last, you should also take a look at the most wanted settings. Great feature, this one, I tell you, great feature!

Compatibility: I tried TypeTester with Opera, Firefox, IE, Google Chrome, and found no problem

SlickMap CSS

Codrut Nistor — Wed, 15 Jul 2009 07:22:00 +0000

Talent is everything, but if you’re not working in a standardized manner, you will waste most of it. Obviously, we’re not talking about sculpture here, since displaying sitemaps won’t help other people than Web designers, but this isn’t a blog for other professionals, so… let’s lend a hand to developers and talk about SlickMap CSS, shall we?

Suitable for most sites you may be working on, SlickMap CSS can accomodate up to three levels of page navigation, as well as additional utility links, as you can see in the image above. Even more, the resulting stylesheet can be easily customized to match your own needs.

Turning the illustration of sitemaps into an automatized process, SlickMap CSS eliminates the need for additional software, providing clickable anchors with visible URLs and being very easy to revise on-the-fly. Best part of it all? SlickMap CSS is completely free to download, use, and modify!

Compatibility: all major browsers, but it seems IE and IE-based ones run into some trouble when trying to use Firefox and Safari extensions… so you’d better try the demo first

Elastic

Codrut Nistor — Tue, 14 Jul 2009 08:09:16 +0000

A few years ago, I messed with CSS for a while, and despite the fact working with it can get pretty tricky sometimes, learning the basics is pretty easy. Since most problems appear when having to handle complex layouts, having a little helper by your side can’t hurt, don’t you think?

The little CSS helper I just spotted is simply called Elastic, and its purpose is to turn the creation of elastic, liquid and fixed layouts into a child’s play. This free CSS framework is based on the 4-columns printed layout approach, but its capabilities allow unlimited column combinations.

Elastic offers a declarative syntax language allowing you to easily define the structure and behavior of your layout, so you won’t have to remember those cryptic class names ever again!

The feature list of this framework is pretty long, and since you can check it out for yourselves, I’ll only add that Elastic is covered by the terms of the
BSD license and, since one image is worth a thousand words, you should take a look at some of the sites made using Elastic.

Compatibility: all major browsers

QuickFlip

Codrut Nistor — Tue, 14 Jul 2009 06:07:15 +0000

I am not JavaScript-powered, but I kept flipping around last night. Oh, yeah, the heat… but since I mentioned flipping, let’s take a look at a useful jQuery plugin that will make your webpage content flip like a card, shall we?

Jon Raasch is a Web developer and SEO expert who spared bits of his precious time to write QuickFlip, and he went even one more step ahead, making it freely available to those in need!

The purpose of this plugin is to take any piece of HTML markup available on your page and make it flip like a card. While this is a very cool effect, I strongly advise you not to use it more than once or twice on the same page. I guess you don’t want it to look like a circus, after all…

QuickFlip uses a CSS trick to get the job done, and allows you to add more information to your page and show it in a pretty handsome way. The only problem is that those visiting your site should have JavaScript enabled, of course. Other than that, everything’s fine, really!

Compatibility: any major browser with JavaScript enabled