Bin-Blog » CSS

Naked Day – Disabling CSS for the Day

Binny V A — Wed, 08 Apr 2009 18:30:17 +0000

Keeping with tradition, this site will be baring all on 9th April 2009. If you haven’t heard about Naked day, this should be enlightening…

Where did my Design go?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

How to participate

Fill out the naked day signup form, then your website will be included in the official list within the next hour.

Then on April 9th, simply remove all CSS from your website, stripping it entirely of its design.

I have been doing this for a few years now…

I know its kinda pointless – since I use a third party wordpress theme – but I still support the movement.

CSS Templating System

Binny V A — Mon, 11 Jun 2007 09:18:21 +0000

In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

css/style.css" rel="stylesheet" type="text/css" />
images/themes/crystal/theme.css" rel="stylesheet" type="text/css" />

PHP Code

Very little PHP is involved to creating this system – I depend on it just to change the path of the CSS Stylesheet. The code used is…

The $theme variable will change if the user changes the theme.

Iconify Links with CSS

Binny V A — Tue, 05 Jun 2007 18:12:49 +0000

Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned a simple trick that made using icons with CSS much easier.

Go to Nexty to see the icons

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit’(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

Rename

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

Create New Task...

CSS Code


.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus – Sections, Projects and Contexts are created using this technique.

XHTML code


...
...

CSS Code


.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels – if you are using icons with a different size, you will have to change the amount accordingly.