Tag Archive for 'topstyle'

jQuery is the only way… yeah!

Published
by
Matt
on November 11, 2007
in Development
. 0 Comments

For those that have not yet discovered the magic and power of jQuery, start now! This library allows you to write javascript with ease! It simplifies many of the complex aspects of javascript and allows you to quickly add some really cool funtionality to your web pages.

Since I use TopStyle for coding, I decided to take the time to make a jQuery Clip Library. It helps me write jQuery code faster in the editor. Download v1 for yourself!

I also made PHP and Miva (if anyone out there is still using miva) clip libraries a while back that are still available for download.

All 3 clip libraries should work in TopStyle v3.x. Don’t forget that TopStyle 3.5 is out if you have not yet upgraded!

Left, Right, and Center with CSS

Published
by
Matt
on April 2, 2007
in CSS and Development
. 4 Comments

TopStyleI use TopStyle to write code for various web sites. It’s still my editor of choice and for many of you… hand-coding is the only way to go. For those hand-coders writing CSS and XHTML, look at the 3 examples below:

Example 1:
.boxa { text-align: right; float: left; }
.boxb { text-align: left; float: left; }
.boxc { text-align: left; float: right; }

The above example works ok, but lets say you start to add more elements to your page. If they don’t fit within the already written styles, you need to add onto your style sheet or edit your current styles.

Example 2:
.boxb, .boxc { text-align: left; }
.boxa { text-align: right; }
.boxa, .boxb { float: left; }
.boxc { float: right; }

Example 2 is somewhat better, however then you’ll run into the problem of having a bunch of .boxb classes everywhere in your style sheet.

Example 3:
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.floatleft { float: left; }
.floatright { float: right; }

I find this to be the best solution. It keeps your style sheet size down and it makes it easier to get your layout just right. For example, you have this tag:

‹div›Information and Text Go Here‹/div›

Now we can start applying styles to it very easily:

‹div class=”floatleft right”›Information and Text Go Here‹/div›

We can easily change the float from left or right, or change the text alignment. Take some other common styles like:

.bold { font-weight: bold; }
.italic { font-style: italic; }
.fonta { font-size: 1em }
.fontb {font-size: 1.25em }

Styles can be applied or changed right from within the HTML document. There’s no need to constantly go back and forth to the style sheet. You also don’t have to remember… did .boxa class have bold in it? Did .boxc class have a float right? Now you can just type bold , floatright, or center in your div tag. It’s like using the ‹center› tag, but making it XHTML compliant!