Browsing articles tagged with "Cascading-Style-Sheets Archives | april.holle.blog"
Jan
11

Links of the Week Vol. 3

Adaptive Path Employees share their new years resolutions with their users. Some of them are very much work related, some not so much, but I thought it would be interesting to see what other web professionals are reflecting on at the beginning of this year.
http://www.adaptivepath.com/ideas/essays/archives/000875.php

This amazing Honda Accord ad required 606 takes, cost $6 million dollars, and took 3 months to complete.
http://www.steelcitysfinest.com/HondaAccordAd.htm

Pretty decent CSS cheat sheet for those of you who want to learn more about the production wonders of the world.
http://lesliefranke.com/files/reference/csscheatsheet.html

Interesting SEO Success Pyramid graphic that highlights some of the key requirements of great SEO success.
http://www.smallbusinesssem.com/img/pyramid-print.jpg

“How many five year olds could you take on in a fight?” Enter your stats and find out how many five year olds it would take to take you down!
http://www.howmanyfiveyearoldscouldyoutakeinafight.com/

Dec
12

CSS Continued… Part 2:Reduce, Reuse, Recycle

Making the web cleaner, one project at a time…

Remember the Cascade To Reduce Selector Use
Try a minimalistic approach to the number of ids and selectors you create. Use the cascade to your advantage by creating child elements of your current class instead of creating a whole new class to describe what you want that additional element to do. So for instance, you have a main body area, and in that area you have a unordered list that has a new list item style. You can code for this one of two ways. You could make two separate selectors (one for the main content area and one for the ul) and have these be totally unrelated to each other and have to reference the ul selector every time you create a ul in that content area, or you could do this:

#contentMain {float: left; width: 660px; padding: 20px;}
#contentMain ul {list-style: disc;}
#contentMain ul li {padding-bottom: 5px;}

This allows you to declare only the <ul> in your xhtml instead of <ul class="ulMain">. This keeps your code really clean and cascading down from the parent class is great because you’re not stuck using those styles everywhere for each ul. This is extremely handy when your dealing with user entered content from content management systems because they don’t have to remember they have to apply particular styles to these elements during development or even worse, when the client is entering the content themselves.

Don’t be afraid to style base xhtml elements, you can always go back and make it specific to a parent selector, or even add a selector to it if they really are necessary.

Create Reusable Selectors
If you notice yourself reusing a lot of css calls in every single selector you create you may want to make a reusable base class. Got a lot of elements that need to float left? Create:

.floatLeft {float: left;}

Then just double up your selectors to reduce the number of times you have to declare the float: left; CSS call in your stylesheet.

<div id="contentMain" class="floatLeft"> </div>

You can create reusable classes for all kinds of things, aligns, floats, widths, etc.

Make Your Classes Carpool
Doubling up your classes can really give you an upper hand when you have elements that need multiple reusable selectors. Instead of creating a selector that will change one aspect of a current class, try doubling up your classes instead.

.product {width: 150px; color: #666;}
.floatLeft {float: left;}

<div class="product floatLeft">Product details here.</div>

Minimize CSS Class Footprint Using Shorthand
You can shorten up your css calls per selector by taking advantage of some of the great efficiency built right into CSS. To help you remember margin and padding short hand use the word: TRouBled. The uppercase letters stand for Top, Right, Bottom, Left, so for instance you’re declaring padding for an element:

p {margin: top right bottom left;}

or you can even shorten it to two entries if your top-bottom and left-right margins are the same, like:

p {margin: topbottom rightleft;}

Another call that is really handy is the font call. So instead of:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1.2em;
line-height: 1.6 em;
font-family: Arial, Verdana, San-Serif;}

you get:

p {font: font-style font-variant font-weight font-size/line-height font-family;}

Another smaller short hand notation is three value hex color codes. So for instance instead of #cc0000 you can do #c00.

Dec
11

CSS Continued… Part 1:Organization Boot Camp

Keep it Together Man!

Always keep your styles in external style sheets when possible.
Inline styles, while they seem handy when you just need to make a quick update, will spell trouble in the future when you need to make full design changes. They also make troubleshooting that much more difficult since you have to remember everywhere you’ve put styles.

Use multiple stylesheets whenever handy.
Don’t be afraid to break your styles out as you see fit. While importing additional style sheets can cause additional server load, the benefit is far greater to break out these styles by relevance. So for instance, you might have reset.css, screen.css, print.css and ie.css all for one project.

Use comments, quick colors and tables of contents.
Make sure to comment all of your css style sheets, if you feel so inclined you can add a bookmark type symbol such as an equals (=) sign. The equals sign is a good symbol to pick since it never occurs in css styles regularly. Then add it to your section comments like so:

/* --------------------------- =header ----------------------------------*/

This allows you to do a find on your document so you can quickly jump from section to section. To make this tip even handier, add a table of contents to your document like so:

/* CONTENTS
=header
=body
=section
=content
=footer
*/

You can also use the top of your document to reference color codes you use quite regularly throughout your document to help you remember.

/* COLORS
Body Background: #2f2c22
Main Text: #b3a576
Links: #9c6d25
Dark Brown Border: #222019
Green Headline: #958944
*/

Thanks to Jina Bolton for all these handy commenting/bookmarking suggestions.

Use consistent organization.
When laying out your stylesheets and styles themselves, try to keep consistent organization project by project, sheet by sheet, style by style. If you work in a larger company, you may want to sit down as a team and discuss how everyone would like to standardize their organization, that way everyone will have the same method to the madness. How you organize your styles is really up to you ultimately, but there are several ways that are common among front end architects.

Sheet Naming and Breakout
Most use the following breakout for their sheets:

  • reset.css,holds the Eric Meyer CSS reset or some variety of it
  • default.css or screen.css, holds all the screen styles, this sheet can also be broken out into the following if you prefer:
    • layout.css, holds all the layout styles
    • typography.css, holds all the typography styles
  • print.css, holds all the print styles
  • ie.css, specific ie style corrections to remain cross broswer compliant, see Conditional Comments on how to implement these

Again, these naming conventions and suggested breakout is just… a suggestion, you and your team can really decide what you want to call these and how many sheets you ultimately end up with. There may be situations in which you want to have a separate style sheet for each theme you use within a site, etc.

Remember the cascade when you import your style sheets, each time a new sheet is called the styles are overridden by the new style sheet if it’s included within. For instance, say you call your ie specific style sheet first, your element style has a width of 200px, and then you call your default.css sheet which has an element style of 205px, the element will pick up the last style it was told, which was 205px from the default, which is not what you want, you wanted the 200px from the ie specific style sheet.

ID vs. Class
I notice that most people who start learning CSS have a tendency to like to use classes more so than ids. When making the choice between using ID or a class, ask yourself one question, “Will this selector appear more than once on a page?” if the answer is yes, use a class, if it’s no, use an id.

Selector Breakout
After you figure out how you want to break your sheets out, take some time to consider how you are going to break out your styles within those sheets. Remember the cascade here too when you’re organizing, since the last style used will be the one the elements pick up. Here’s a sample of how some front end architects organize their styles within each sheet:

  • container styles and parent elements, such as body, wrapper, or containers
  • standard element styles, this includes HTML elements such as h1-h6, p, blockquote, etc
  • global styles, anything that will be used throughout the site such as mastheads, etc
  • section specific styles, anything that changes on a page by page basis

another example would be:

  • parent styles and containing elements, working outside in
  • block-level elements
  • inline level elements

After you layout your styles, you may want to get really picky and organize how each style call is called within a style set. After years of experience, some people just form a natural tenancy to call some styles before others, take for instance the way Jina Bolton does her calls per set:

  • positioning (with coordinates) styles
  • float/clear styles
  • display/visibility styles
  • spacing (margin, padding, border) styles
  • dimensions (width, height) styles
  • typography-related (line-height, color, etc.) styles
  • miscellaneous (list-style, cursors, etc.) styles

I have also personally formed a natural tenancy that goes something like:

  • positioning
  • float/clear
  • display/visibility
  • dimensions
  • margin/padding
  • borders
  • typography
  • misc.

Other front end architects prefer to go another route in hopes to make it easy for others to find things, alphabetically listing their style calls within their sets. At this level, organization might be too obsessive or asinine, but some people consider it helpful.

Also, I’ve noticed two ways of laying out your css sets, some front end architects choose to tab out their calls like this:

.cssSelector {
csscall: option;
csscall: option;
}

While others like to do it all in one line:

.cssSelector {csscall: option; csscall: option;}

Either is acceptable of course, but again, if you’re working in a team environment, you may want to standardize this so that everyone can read it easily. I personally opt for the all-in-one way since I like seeing how many lines of CSS I *didn’t* have to write to make something work.

Selector Naming
CSS selector naming is also very important. When naming selectors remember that your styles may change, so try not to name based on a item’s location within the layout or particular style attributes, such as color or size. Instead, try basing your selector name on the content it holds, Andy Clarke wrote up a great set of examples.

There is also some debate on whither to use camelCase or to separate using the dash (-). Honestly, either are acceptable. Again, perhaps this is something to discuss with your teammates.

So that’s it for this part of CSS Continued… was there something in here you didn’t quite agree with? Perhaps you want to share how you organize your sheets and selectors… leave a comment and we’ll get some sweet discussion going!

Dec
11

CSS Continued…

CSS is easy enough to start to learn, but it really takes some practice to master and understand the beautiful efficiency it provides. These techniques of efficiency separate the apprentices from the masters in the art of CSS. Now that I know what I know now, I wish someone would have told me these secrets from the beginning. The longer you practice great CSS techniques, the better you’ll be at it, so I’m giving you a head start with my first blog series: CSS Continued…

So listen closely Grasshoppa. 😉

Dec
4

Refresh Recap: ALA Web Design Survey

Alright so at this point everyone has read the 2007 Web Design Survey at A List Apart. If you haven’t, you should… really. This is the first time we’ve ever had a survey for the web industry alone, and while it’s not necessarily scientific, it is a good sampling of the community, nearly 33,000 web professionals.

The December edition of Refresh Phoenix shared the survey results and open discussion was has regarding what statistics we thought were interesting finds throughout the document. Such as:

16% of web workers polled were female.  Why is it that females are not prevalent in our industry? Check out a great set of interviews by fadtastic, where they contacted several of the industry’s leading female web designers to ask them the same question.

85% of web workers are white. What causes our industry to be so monochromatic? How is it that world wide there is still a serious racial rift in computers and design? Does this matter? Does this need to change?

53% of web workers said their field of study was directly related to their career. Leading one to reconsider the age old myth that you don’t need to be a college graduate to be in the web industry. Salary data also suggested that a bachelors degree helps boost web workers into that $40-60k salary range.

28% of web workers are in-house, 23% are self-employed and 22% are part of a design/advertising firm. This even split reminds us of all the employment possibilities there are. It also makes note that there really isn’t a large majority in one working environment.

23% of web workers work 30-40 hours a week, 42% 40-50 hours a week, and 12% 50-60 hours a week. So remember when you’re punching out at 7 pm that you’re not the only one out there!

When looking at the salary range data, salaries tend to bottom out at 40-60 k a year after 5 years of experience.  The highest paid are Information Architects and Usability Experts. The self-employed/freelance sector made the least, under $20,000 a year. However, this does not split full-time freelance and part-time freelance, so some of this may be supplemental income to their full time positions as well.

Project Managers and Information Architects seemed to be the most satisfied with their jobs, while designers, web designers, webmasters, and the self-employed were the least satisfied when looking at Job Satisfaction data by job title.

72% of web workers polled have a personal site or blog. This doesn’t seem unnatural that web savvy people would have their own sites, but what is interesting is that the percentage of people who blog across gender and salary ranges did not vary greatly. In other words, 72% of EVERYONE in the web industry has a personal site or blog. The real question is how often do they blog on their blog? hehe

One of the questions posed was, “What would you like to see survey statistics on that were not included in this document?” Answers ranged from “Percentage of web workers who have ADD?” to “Ratio of hours worked and salary.” The best questions that are currently not answered by the survey were, “What are the range of benefits?” and “What’s the percentage/range on working conditions (corporate vs. casual)?”

Still, my brief synopsis doesn’t do this survey justice. Please, if you haven’t already, read the full survey. It’s full of interesting information regarding education, salaries, work environments, how we stay current in trends, and more.

Nov
5

Refresh Phoenix: Blueprint CSS

Come on over to Inza Coffee House tomorrow night to join me and the crew of Refresh Phoenix as we discuss Blueprint CSS.

Blueprint is a CSS framework by Olav Bjorkoy, which “aims to cut down on your CSS development time.” Matt Heidemann & Matt Gist from Integrum Technologies will talk about their recent work with Blueprint. They’ll show examples of the framework and a project they recently used it with.

See ya there!

Oct
26

sIFR 3.0 Inline

Recently we’ve completed four sites for Civigroup Companies. Within those sites you’ll notice several instances of sIFR (flash replacement text) inline with content. This is no easy task for sIFR text.

While trying to accomplish this feat of magic, I spent quite a bit of time researching different aspects of sIFR and how it works with CSS to understand how to make this work properly and of course, all while being cross browser compliant! So, in order to perhaps save someone else the time and hassle of trying to figure out the magic equation, I figured I’d share my experience.

Step 1: set the sIFR class on a span tag where you want the text to be.

<span class="h1inline" style="width: 325px;">Heritage. Commitment. Vision.</span>

Notice the width style attribute, this is required to make sure safari does not include extra space behind the span and before the rest of the copy.

Step 2: set the attributes in the sIFR-screen.css sheet to make it an inline block element along with the rest of your styles.

height: 25px;
display: inline-block;
overflow: hidden;

Notice the display: inline-block; this is also a safari required attribute.

Step 3: Tune height if necessary in the sifr-config.js

tuneHeight: '-5'

This will help if you plan no not only having your sIFR text inline, but also a link. I was having difficulties with the underline of the hover state being cut off by the flash doc.

 And viola you have sIFR text inline!

Oct
21

Local Lifestyle Magazines Recieve Facelift

I’m proud to announce that Terralever launched two new sites into the world wide web this week. We have just finished production on a redesign and large back-end content management system for Cities West Publishing sites, Phoenix Home and Garden and Phoenix Magazine.

I am really proud to have been part of this success. The website may seem large and elaborate, but with the use of themes, masterpages, and dynamic content the site itself is about 20 pages in total. This was the first website in which we were really able to experiment with large scale theme usage and I learned quite a bit about how to make the front end flexible enough to reskin.

Making sure css naming conventions were simple enough to reuse through out the process was a key piece of the puzzle. I used the content to determine the class and id naming instead of color or position since both of these could change dramatically. This was not only important to switch from theme to theme within the sections of the site, but also we chose to reuse quite a bit of code from one site to the next to save cost for our client. Thus, the reasoning in similar layout from one site to the other.

Making sure each piece of content knew what month and what section it appeared in was also a large undertaking in this process, thankfully our wonderful back end development team did an amazing job of coordinating how the data manipulated the themes and sections with in the site.

In addition to the amazing design and development that went on to create the front end look and feel, there was an amazing effort on the back end administration system. Back behind all that wonderful content is an editorial staff that needs to input it in every month in a quick efficient manner! To help them with this, Terralever created an amazing custom content management system that allows the editorial staff to select which issue an article appears, what section, enter in the content and add supplemental photos to each story.

For each story the editorial staff has full access to create and layout articles however they please. They can add as many photos, call outs, etc to make each layout custom to the story it holds. To help them with this process, we created five templates for them to start with, allowing them to enter content quickly and then make the necessary additions with more photos, more call outs, etc.

The administration also gives the staff full access for the featured flash piece on the homepage, to create and edit user polls, add events, showcase photos in galleries and have users sign up for news and emails.

While these sites were a big project and some nights were spent eating at my desk instead of in front of the TV, it’s always worth it in the end. To go to a live URL and see something you’ve invested so much and learned from is amazing.  These sites are definitely two projects I’m proud to have been a part of. I hope you enjoy using them as much as I enjoyed building them.

Oct
10

Print Style Sheets and ASP.Net Themes

I’ve been researching printable style sheets, and came up with an issue on Terralever.com. How to make the theme stylesheets have a media type!

So I did some side research and came up with the most common answer out there: set an @media type in the css file itself. Read an article regarding @media type.

There was also an interesting article by the same author regarding how to define a particular load order.

This works GREAT for print stylesheets, but what about when we want to do IE6 specific styles? What then! If you’ll notice, when you set a theme, the stylesheet it populates at the end of the header tag, which would overwrite any specific stylesheets we would reference above it.

If we declare themes in the @ page declaration using StyleSheetTheme instead of just Theme the document is then populated with the css stylesheets at the beginning of the head declaration instead of at then end. More information regarding this and other theme and skin information. This would allow us to create javascript that would check for browser type/version and specify additional stylesheets for these versions if required.

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…