About

Sitemasher Buzz Blog

Catch the latest news.

Now Viewing Category 'all'

  • More CSS Resources

    Posted by Sean on 
    Wednesday, October 29, 2008 12:00 AM

    We're pretty busy here at Sitemasher, so I'm going to make this quick.

    I often get asked where I look for new and interesting ideas for CSS coding. Well, you're in luck. I'll share a few of those with you today:

    • CSS Beauty - they search out many of the lastest and greatest CSS ideas and pass them along;
    • Stu Nichols' CSS Play - this former electronics design draughtsman turned web guy is constantly looking for new ways to do things using CSS;
    • A List Apart - Zeldman and gang are always posting something worth reading;
    • Smashing Magazine - they've got something new and interesting up there pretty much every day. It's not all CSS stuff, but I'm sure you'll find something that perks you up;
    • Web Appers - much like Smashing Magazine, it's not all about CSS, but is very useful;
    What resources do you folks use?
    Categories:
     All, CSS,
    Tags:
     css

  • Using CSS in Sitemasher

    Posted by Sean on 
    Friday, October 10, 2008 12:00 AM

    It's been pretty busy around here at Sitemasher. Our product was released for public consumption at the start of October, so there's been a lot to do.

    Now that it's out there, I'd like to give you a quick tour of how CSS works in there. Basically, in Sitemasher, CSS can be approached in three ways:

    1. import it from a CSS file on your computer
    2. write it from scratch using our Style Sheet editor
    3. as you build your page, you can also use our Visual CSS editor to create inline styles.

    Importing Your CSS

    If you've already got a CSS file you want to use, #1 is the way to go. Just use our upload tool and you'll be good to go. Your styles will appear in the right-side properties and CSS tabs when an object is selected.

    There are a couple of things to note here:

    1. Because of the way our product was built, there is no use of ID's when building pages. You'll have to stick with classes for now.
    2. Make sure you have properly mapped the image path in our file before importing. Currently, the image path would be in the same folder as the CSS - ie. url(image/imageName.png).
    Both of these issues can be fixed with simple Find & Replace in your current editor.

    Writing Your CSS from Scratch

    If you're starting fresh and want to write your CSS code in our product, you can do that as well. Once in Studio, click the "Style Sheet" tab and you have 2 options:
    1. Code up the CSS in the text editor. First, click the "New" button on the lower left of the screen, then choose "Insert Style Item".

       

      Your class or element will then appear on the left side. Highlight it by clicking on it, then code away in the CSS text area to the right. Click "Apply" to save the style once you're done.

    2. Your other option is to make the new style using step 1 from above, then to use the the nifty Visual CSS editor over on the right.

      Make sure your new style is highlighted on the left, then go to town. As you add or change styles, they will appear in the text area in the middle of the Style Sheet editor. You can then make further changes using either the Visual CSS editor or change the code in the text area.

    Creating Inline Styles Using the Visual CSS Editor

    If you're not a stickler for hand-coding your CSS, our Visual Editor gives you an easy way to customize your page. Go through each of the sub-tabs and set the appropriate styles. You're done. Almost easy as pie. The summary of the styles you've created will then appear in the "Summary" tab, which also allows you to clear the styles if you'd like to start over.

    What do you folks think? Does it look usable to you? Visit Sitemasher, sign up and give it a try for yourself.

    Categories:
     All, CSS, Sitemasher
    Tags:
     sitemasher, css

  • Organizing and optimizing your CSS files

    Posted by Sean on 
    Monday, August 18, 2008 12:00 AM

    When writing CSS code, I often use a great program for Mac called CSS Edit. One of the things I like most about it is that they've integrated code "grouping" into their left-side style list. This allows me to code these groups and view them in Windows Explorer-like folders and hierarchies. It's very useful. We're actually putting similar functionality into our product.

    I've seen many suggestions on how to write and organize CSS code; everything from sorting alphabetically to the approach I usually take, coding in functional chunks (header styles together, footer styles together, etc.).

    One of my co-workers, Shelby, sent me a link this morning to an article in Smashing Magazine - 7 Principles Of Clean And Optimized CSS Code. Give it a read.

    They have some great suggestions in there. One of my favourites is to use CSS shorthand. This involves taking the following: .test {margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px;}

    ... and coding it as: .test {margin: 5px 6px 7px 8px;}

    I like to think of the way the code is read as being clock-wise: the first value represent the top, the 2nd the right, the third is the bottom and the fourth is the left.

    As they say in their article, "Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!)." We all know how long some CSS files can get and using this shorthand technique is a great way to shave a lot of that line bloat out of there.

    C'mon folks. What are some of your favourite methods of organizing and optimizing your code? Let me know.

    Categories:
     All, CSS,
    Tags:
     optimizing

  • PNG Transparency - Unit PNG Fix

    Posted by Sean on 
    Wednesday, July 30, 2008 12:00 AM

    This is just a quick follow-up to my post last week. While reading Webappers.com, I came across their write-up on the Unit PNG Fix. I had the chance to use it this weekend on a personal project and it worked like a charm.

    As they point out on their site, it definitely has its upside:

    • Very compact javascript: Under 1kb!
    • Fixes some interactivity problems caused by IE’s filter attribute.
    • Works on img objects and background-image attributes.
    • Runs automatically. You don’t have to define classes or call functions.
    • Allows for auto width and auto height elements.
    • Super simple to deploy.
    The one issue I did come across was the way it treats background images... So, if you're trying to use the navigation sprite (1 image for all images/states), it screws that up. Having said that - if the IE6 PNG transparency issue is something you've been looking into, this is certainly worth a shot.
    Categories:
     Images, CSS, All,
    Tags:
     png, css

  • IE6 and whether or not to validate CSS

    Posted by Sean on 
    Monday, July 28, 2008 12:00 AM

    Over the weekend, I was doing some work for a friend of mine and came across the annoying lack of support for PNG transparency in IE6. This brought to mind 2 things:

    • WHY ARE THERE STILL PEOPLE USING IE6??
    • If I use the work-around, the site's CSS will no longer validate properly.
    Seriously though... why do people still use IE6? Have they not heard of Windows Update? At what point do we as developers resort to either ignoring IE6 or doing a browser sniff and pointing them to a "Please upgrade your browser" page? What do you folks think?

    OK, enough of my rant. Because IE6 is still out there and still has roughly 25% of the browser market share, let's get back to the meat of the PNG transparency matter. When looking to have transparent PNG's display properly in IE, I'll normally resort to using the HTC hack. This is a good thing. The bad thing is that it breaks the site's W3C CSS validation if someone runs the test.

    Now you may be about to point out that our site (www.sitemasher.com) uses the hack, but I did not develop our corporate site, so shhhh.

    I pride myself on producing 100% compliant sites, so this pains me... but should it? What it comes down to is that the site's code is 100% compliant, except for the included hack code. On their site, the W3C gives reasons for validation, but I'm thinking they don't really apply when you're a knowledgeable developer and know what rules you're bending.

    So, I'm asking you folks - what do you think about this issue?

    Categories:
     All, CSS,
    Tags:
     css

  • Howdy and welcome to CSS Ninja

    Posted by Sean on 
    Sunday, July 27, 2008 12:00 AM

    Hi there folks. Welcome to CSS Ninja. As you may have seen over there on the right, I'm Sean. I'm a front-end web developer by trade and much of the work I've done over the last bunch of years has involved Cascading Style Sheets (CSS from now on), including one job at which my official title was actually "CSS Ninja".

    I started using CSS after attending a class at SFU back in 1999 or 2000 when I was at Burntsand, which featured none other than Eric A. Meyer. He opened my eyes to where this new stuff was going and what it could do. Of course browser support back then was pretty bad, but it was high time I got into CSS.

    I'm not going to get into my work experience. If you're interested in that, have a read of my bio or email me and ask. :)

    Here at Sitemasher, we're building a pretty damn cool product that is going to have a sexy CSS tool built in. So, if you're the front-end developer sort, you'll easily be able to style things up all pretty like and make your customers happy. In the end, that's what really counts. You save time while building and have the flexibility to be able to easily do what you do.

    In the coming months, I'll be posting both general CSS-related thoughts, or tips on how to use CSS in our product. I hope you'll check in occasionally and even say, "Hi".

    Categories:
     All,
    Tags:
     Help

  • To reset or not to reset - using a CSS reset

    Posted by Sean on 
    Thursday, July 24, 2008 12:00 AM

    Since we're at the start of this blog, why not start off with something that many people put at the top of their style sheets, a CSS reset. There are definitely folks out there who don't subscribe to the reset school of thought. Personally, I'm a fan. I use Eric A. Meyer's CSS Reset.

    Now you may be wondering, "What the heck is this CSS reset stuff he's going on about and why would I use it?" Well, let's get into that.

    Web browser engines treat various default HTML elements in different ways, resulting in pages looking differently in Internet Explorer than they do in say, Firefox. A CSS reset represents a big step towards easing our way into browser consistency. To put it simply, a reset allows you to start your site with a clean slate, which is consistent across most browsers. Eric Meyer explains the concept very well, so to get the full skinny, go have a read of his post on the subject.

    Quite a while back, I would start my sites' CSS with: * {margin: 0;padding: 0;border: 0;}

    As Jonathan Snook points out, this approach has its negatives. Text boxes and submit buttons would lose their borders, lists would go all wonky, etc. It inevitably led to me having to write more CSS code to work around this method than it was worth.

    When you use Sitemasher's style sheet editor, you'll be able to insert a CSS reset at the top of a style sheet simply by clicking "Insert CSS Reset" from a contextual menu. If you don't want it, you won't have to use it. If you want to use another reset, well you'll be able to do that as well by pasting the code into the editor.

    There are various resets out there (with Yahoo in the mix as well) and through trial and error, I've found that Eric's works best for me. What do you folks think? What do you use? If you don't use one, why not? Let me know.

    Categories:
     All, CSS
    Tags:
     css, html, css reset