Entries for label: css

Found 3 entries.

Playing with CSS

Over the past couple of months, I've implemented a new site in Zaapt. Usually I take a design with HTML and CSS and just use it straight but this time, I wanted to write the HTML and CSS myself.

I first found a theme I liked which had been converted from a WordPress theme to a BlogSpot theme. Then I found the original WordPress theme.

But of course, I wanted to implement it in Zaapt so I converted it to a Zaapt theme. Over the space of a couple of months, it also meant that I added a few extra features to the blog model, which included an archive list as well as a category list. Anyway, that isn't the discussion of this entry.

Doing the Layout in CSS

A little while ago, I stumbled across a site called 960 Grid System and I immediately thought it looked good. It turns out that getting a 2 or 3 column layout is pretty easy and so good I used it on the new site. Then all I had to do was re-implement all the important parts of the WordPress/BlogSpot templates but ignoring all the cruft that goes along with it (Zaapt is nice in that it's templates don't have to be over complex).

Anyway, to take a look at the new site head over to my Personal Finance blog Retire at 40 (over 150 subscribers now). The columns were damn easy to do and the reset.css stylesheet from the 960.gs set means you start all browsers off on the same foot.

Of course, IE is giving me grief in versions 5.5, 6 and 7 (Update: IE 8 actually looks ok) as can be seen by BrowserShots - which by the way, is one funky-ass site but you know, I'm not too worried though but I'd be happy if I could get a solution. Firefox looks just beautiful.

Isn't that always the way?

Labels: retire-at-40, css, zaapt, 960-gs, planet-catalyst

Inserted: 2009-01-08 00:13 (1 year, 6 months ago)

Phliky Test

Phliky has had some improvements lately and is now on this server - quick test!

Phliky has had two things added to it recently:

  1. the ability to add unordered and ordered lists
  2. the ability to add definition lists

Like this one:

: Coffee: Black hot drink Milk: White cold drink

Hopefully, they should work - fingers crossed. After all, I added nine extra tests to check the lists and two tests to check the definition lists.

Seems to work, except my CSS for the definition list is a bit out. Will be fixed another time :-)

Labels: phliky, css, unit-test

Inserted: 2006-10-10 22:47 (3 years, 9 months ago)

New Thinking for a CSS Approach

Having played with CSS using other people's styles, those of my own and those already existing, I had a thought the other day about how I would try it next time.

Even though CSS is supposed to stop us from putting layout details into the HTML, it has it's own layout v style problem. Take, as an example, the following CSS:

 div.content {
    margin-top: 3px;
    color: #333333;
 }

This, in my opinion, actually contains both a style (the color) and a layout (the margin-top). I know that CSS is supposed to be all styles, which is why it is in the accronym, but sometimes it gets in the way too.

As an example, on a rather large site I have been working on, there are quite a few different pages which share some generic styles but can vary greatly in the layout. It is a very data driven site rather than a content site, therefore, there are lots of finicky bits to help certain data stand out. The above class only contains 2 styles, but for some of these screens there are many, many more styles.

Recently, I've been thinking of a new approach to this problem. On a smaller website I recently completed, in a lot of cases I was assigning 2 or more classes to each of the HTML elements. Sometimes these were each of style and layout, but in some cases, it was two styles and in others, it was two layouts. As an example:

 .bg-shaded    { background-color: black }
 .bg-highlight { background-color: white }
 .bg           { background-color: gray }
 .fg-heading   { color: #FFF; }
 .em           { text-decoration: italic; }
 .right        { text-align: right; }
 .spaceit      { margin-top: 3px; }
 .padit        { padding: 0px 12px; }

Then in the HTML:

 <div class="bg-shaded fg-heading em right spaceit padit">This is extreme</div>

I know there are various ways to help with this, especially leveraging the power of the 'cascading' part of the standard. Also, the use of <h#> and <p> and the rest can help, but as I said, the site is very data driven and therefore most things end up in <div>s.

So the thought is that there is a generic.css stylesheet, in which go the standard styles used across the whole site. Then there is a styles.css stylesheet in which go the various text, font, colour, padding and border styles - it is these which can proliferate. But the main thing which became the hardest thing to cope with was the layout for each page since they were all very different, therefore, each page has it's own layout.css stylesheet.

As a small example, here are some stylesheets:

 file: generic.css
 
 * {
    padding: 0px;
    margin: 0px;
    font-size: 10px;
    font-family: Arial, Helvetiva, sans-serif;
 }
 file: styles.css
 
 .hdr   { color: #ffffff; background-color: #006d1b; }
 .sub   { color: #ffd96b; background-color: #108d18; }
 .em    { text-style: italic; }
 .upper { text-transform: uppercase }
 file: layout.css
 
 .rounded-hdr { width: 400px; background: url(rounded_hdr.jpg) no-repeat top; }
 .rounded-sub { width: 400px; background: url(rounded_sub.jpg) no-repeat bottom; }
 .squared-hdr { width: 400px; background: url(squared_hdr.jpg) no-repeat top; }
 .aquared-sub { width: 400px; background: url(squared_sub.jpg) no-repeat bottom; }

As an example then, you can choose a heading and subheading with rounded or squared corners:

 <div class="hdr rounded-hdr">A Heading</div>
 <div class="hdr rounded-hdr">A sub-Heading</div>
 <div class="hdr squared-hdr upper">A Heading</div>
 <div class="hdr squared-hdr">A sub-Heading</div>

(I know a div of class 'hdr' or 'sub' could have been used around the whole thing and then the internal classes choose the images, but this was just an example. It also retains a great deal of flexibility.)

You can assume that the number of styles, layout CSS and generic CSS is greatly increased on a much larger project.

I might not have convinced you, but I am planning to try this out next time I run across a site with a large number of page layouts.

Labels: css, html

Inserted: 2006-08-03 15:56 (3 years, 12 months ago)