Archive for the ‘tutorials’ Category

I’m sure anyone, who has ever down any hardcore web development or developed a web application will know that after you reach a certain size, your CSS files start to get unwieldy — That is, they become hard to edit, cumbersome to make bug fixes to, and sometimes start taking a month of Fridays to load.

A Common solution to this is to use CSS Indexing, where you set up a system of comments to be able to quickly find your way around your files. While this method of having Comment Headings for each section works, it still leaves you with a massive file size.

Another solution is to go the way of a Framework, where by you break each part in your css down to it’s core components. A list of the core components may look quite similar to the following:

reset.css
Yes, I use a reset stylesheet, simple because it makes it easier to develop styles consistently across browsers.
typography.css
This includes everything to do with type. From the Baseline and Line-height settings, right through to font-sizes and image alignment.
grid.css
A standard style grid systems. Typically including CSS for doing column layouts and table grids.
importer.css
One file to @import in all your CSS files, alternatively you can just link in each of your stylesheets using the <link> tag in HTML.

From that basic layout of files, I then use a I trick call “Body Identification”, this is simply the method of applying a unique ID to each type of page in your site. e.g. If your ‘about us’ page needs a red background, then I’d use this selector to apply the CSS rule.

With using a unique page ID, it’s probably a good practice to put all the CSS files named by their unique ID’s in a folder called ‘pages’ or ‘layouts’. You’re file structure is now looking much more like this:

  • ./ grid.css
  • ./ reset.css
  • ./ typography.css
  • ./ pages /
    • aboutus.css
    • frontpage.css
    • blog.css
  • ./ importer.css

So there you have it, a simple way to manage your css, with the benefits of being in small chunked files, having an abstracted framework to work around — a Scaffold, if you will — and, you also have highly specific stylesheets targeting individual pages of your application.

You can Learn more about CSS Frameworks at:

What’s your own take on the Use of CSS Framworks and They’re Applications?

Okay, So I’m back from no posts, so I thought I’d write about a nice little gem I found while searching for some techniques, tutorials and ways of doing certain things in The Gimp. I’ll probably post more tutorials soon, but here’s the first one, It’s heavily based on this tutorial by Antichange on deviantart.

Painting Clouds In The Gimp

  1. Create a new blank canvas any size you want, I used 1600×1200, set the canvas up with the following settings:

    Transparency

    Colour Space: RGB; Fill With: Transparency

  2. Here comes a fun part: Take out the paintbrush tool (P), select a nice greyish blue colour – #6caad8 maybe? – and then paint on a few circular scribbles:

    Quite simple to do, and also, quite fun if you make it.

    Animation Of Painting: Quite simple to do, and also, quite fun if you make it.

  3. Now, take out the Dodge/Burn tool ( Shift + D ), and start Dodging colour away from the inside out ­– I used a brush size of 15, a scale of 1, no pressure settings, mode of Midtones, and an exposure of 40.
    Note, This needs to be done in one mouse click
  4. Now, still with the Dodge/Burn tool, Repeat the process of step 3. You should end up with something like:

    What I ended up with; After trial and error, you'll get something that looks about right.

  5. Here’s another fun part: Take out the Smudge tool ( S ), and start smudging the colour from the light area to the transparent area.
    Note,
    I had to fill up the transparent areas that I’d left, simply by using the paintbrush and Selecting the colour I needed to patch up.)
  6. Duplicate the first layer below itself, and add a Gaussian Blur (Filters -> Blur -> Gaussian Blur), and set the radius to around 60 (or whatever looks right to you).
  7. Merge the two layers together. Add a Layer Mask to the resulting layer, we want to select “Black (full transparency)”. Switch to that layer mask – next to the layer preview, there should now be a black box with a white border. (You’re cloud will disappear, due to the layer mask)
  8. Now, take out the gradient tool ( L ), select the shape of Radial and the colour to be white. Then, draw on to several gradients from the center of your cloud out. (As you do, you’re cloud will become visible again)

    I'll be the first to admit that this is kinda cheating, but it gives the desired effect.

    I'll be the first to admit, that this is kind of cheating.

  9. And now we’re pretty much done, you may want to add another layer select the cloud via “alpha to selection” and filling it with white, so you’re cloud isn’t a bright blue. But other then that we’re all done. Here’s the original tutorial, once again.
The Final Piece of Work, with a few additions

The Final Piece of Work, with a few additions

In my last post, I talked about working with XULRunner, and just a few of the things you can do with it. I thought now would probably be a good time to write up a small tutorial, based on my own knowledge and that gathered from various sources.

Continue Reading »

As most people who use deviantART.com on a regular basis will know, you can theme your journal using css. Now, for those that don’t know much css, there are a number of tools to give you a hand. For those that know css, and would like more, there are also resources. But before i go on, you must note, in order to use css in your journal, you must be a subscriber.

Continue Reading »