CSS Tutorials - CSSHelper.net

Wordpress has become a great platform for a wide range of website needs. Originally designed for blogging it is now a common package for full fledged content management systems and even complete web based applications.

Now we even have great opportunities to use Wordpress as an internal communication and back office tool. With these assortments of plug-ins we can use our favorite open source software to improve our businesses, efficiency and offer more solutions to our clients.

Billing

If you are a freelancer or a small company you know how much time can be sucked up by managing your billing. This is a bit of a shame because the billing part of the job should be the most fun, it’s how you get paid! There are a lot of available paid solutions for billing, but they are all hosted on different websites and applications and are not as nice and neatly integrated as doing it through Wordpress. Luckily we have WP-Invoice, a full invoice creation and tracking system that integrates with Wordpress directly.

It features:

• E-mail invoices to clients
• Save client data
• Payment processing options such as Authorize.net, Paypal, etc…
• Archived invoices
• Secure connection for viewing invoices

Download WP-Invoice

Contact Relationship Management

As your business grows the amount of clients, leads and strategic partners you have will also grow. It is time to throw out the Rolodex, get rid of your piles of business cards, there are better ways to manage your contacts. The newest solution would be using a Contact Relationship Management system or CRM. There are a wide range of different CRM solutions available (salesforce.com, highrise, etc…) however Wordpress can function as one with the simple installation of a plug-in!

WP-CRM features:

• Associate an image with each contact.
• Assign each contact to a company… or don’t.
• Create a note history for each contact.
• Clickable email and website links.
• Google map contacts address.
• Dial a phone number (works on cell phones with internet browsers).
• Fully hcard / vcard compatible.

Download WP-CRM

Project Management

Still using a pen and paper to manage your projects? You might as well be using a sundial to check the time! Using software to manage and track your projects is a lot easier and more sophisticated. While there are plenty of good commercial solutions available, why not integrate it into Wordpress? That way it is easy to use, customizable and open source. With the simple installation of a plug-in you can:

• Track clients
• Track projects by client
• Track tasks by project
• Track time per task with dynamic timer like Harvest

Download WP-Project

Office Communication

Sometimes proper and adequate communication is the most important and most difficult aspects of running a larger company. There are all sorts of tools that attempt to correct and fix this problem, some of them more effective than others. The Wordpress team themselves encountered this issue and sought to find a solution that integrated into their beautiful piece of software. Hence Prologue was born - a twitter like tool that can run off of your web server.

Download Prologue

Newsletter & Notifications

Need to send news and updates to your employees? Maybe you want to do some e-mail marketing for your company? Rather than pay monthly or per e-mail using an overpriced and underachieving e-mail marketing solution just integrate it with Wordpress. There is a simple, effective and easy to use newsletter tool that will do everything you need and more.

Download the Newsletter Plugin

Calendar

Keep track of all the events and important milestones going on with your business by using a simple and easy to use calendar system. There are a handful of Wordpress plug-ins that let you create and manage calendars, I have had the best luck with WP-Calendar. If you want to get very fancy you could also have a members only calendar so that only employees and those with a login can see it.

Download the Calendar Plugin

Read More

CSS Blog

CSS or Cascading Style Sheets is normally used to separate the style and layout of your HTML files from the actual content. However, few are aware of the added value that CSS can give to your website. Aside from the obvious ones like style standardization, CSS can be utilized to provide other useful stuff not possible with table-based layouts.

Among these benefits are things like:

• Server bandwidth reduction
• Media type formatting
• Menu overlapping
• Styling of form elements
• and even E-mail address obfuscation

Much information about these techniques can be found on the web. Below are some example implementations.

Server bandwidth reduction

CSS Optimization can translate to huge savings in server bandwidth, resulting in lower operational costs.

This article compares some of the best CSS optimizers available on the web by using heavy traffic websites like Digg and Slashdot as an example.

Media type formatting

By utilizing the CSS media attribute, you can easily control display for different media types. This is best used when formatting websites for mobile display and creating printer-friendly pages.

Here is a good tutorial that covers CSS development for mobile browsers. For techniques related to print styling, refer to this tutorial, another tutorial, and this article by Eric Meyer.

Menu overlapping

The CSS z-index property specifies the order an element is stacked, similar to how layers are arranged in Adobe Photoshop. It is also relatively easy to understand, and can be quite powerful when used correctly. It can also come in handy when creating overlapping menus. Here is a very good tutorial on how this can be done.

Styling of form elements

In a previous article we linked to Jeff Howden’s CSS-Only, tableless forms article which gives an example of what can be accomplished with CSS form styling.

Then, there’s also The Form Assembly, a CSS Zen Garden clone for showcasing form designs.

E-mail address obfuscation

When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. There are many ways to accomplish this, and one such method can easily be implemented in CSS. Silvan Mühlemann tested nine methods and published a test page for spambots to harvest. 1.5 years later the results are out and surprisingly, only the CSS methods resulted in absolutely zero spam.

Share

Read More

CSS Blog

Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.

The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.

Scalable Inman Flash Replacement (sIFR) / sIFR 3

Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.

Pros:

• Fully accessible to screen readers and assistive technology
• Partially selectable text (cannot select surrounding elements)
• jQuery integration
• Anti-aliasing results in crisp font rendering
• Flash-based font embedding is generally an allowable practice by most font foundries
• Easy to add text effects such as shadows in Flash

Cons:

• Requires Flash
• CPU and memory intensive
• Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
• Can be tricky to set up
• Embedded fonts cannot be printed

Cufon

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Pros:

• Easy to set up
• Does not require Flash
• Fastest loading and processing time (according to this presentation)

Cons:

• Inability to highlight and copy/paste text
• License issues prevent many fonts from being legally embedded
• Does not support justified text alignment
• Hover state for elements other than links might result to unpredictable results
• Requires extra JavaScript to prevent FOUC on IE7

Typeface.js

Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.

Pros:

• Easy to set up
• Does not require Flash
• Fast loading and processing time

Cons:

• Fonts are only selectable in browsers that support <canvas>
• Hover state is not supported, but a workaround that requires extra code is available
• License issues prevent many fonts from being legally embedded
• Long loading times in IE
• Only supports TTF (does not support .otf, PFB, and postscript fonts)
• Requires extra JavaScript to prevent FOUC on IE7
• Has spacing issues, according to some people

Facelift Image Replacement (FLIR)

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
Pros:

• Does not require Flash or JavaScript
• Fonts are rendered as an image and does not violate font licensing terms
• Many text effects available thanks to Imagemagick

Cons:

• Inability to highlight and copy/paste text
• Can be painful to set up
• Requires a web server with PHP and the GD library enabled
• Finer details of fonts are not rendered very well by the GD library
• Takes up additional server resources to process (bandwidth and CPU)

The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.

Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.

Share

Read More

CSS Blog

Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.

Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.

SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.

What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.

It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.

In the README file:

SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.

The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.

It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!

Share

Read More

CSS Blog

“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.

OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:

• It allows you to write fast, maintainable, standards-based front end code.
• It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

OOCSS is governed by two main principles:

1. Separate structure and skin
2. Separate container and content

Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.

Share

Read More

CSS Blog

If you’ve been a reader of CSS Newbie for any length of time, I’m sure you’ve noticed that not all of my articles are directly related to CSS. I also talk about HTML, JavaScript, content management systems, ecommerce solutions, and other related skill sets and areas of expertise.

This is for many reasons (for starters, I’d get bored otherwise!), but the main overarching rationale is that these areas of expertise are all complementary. Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential.

This means these skills are just as important as the CSS my site’s name suggests you’ll learn.

However, there’s only so much I can teach. I’m not an expert in everything related to web development, nor will I ever be. And while I consider myself pretty decent at writing these tutorials (which means my English degree wasn’t a total waste!), I consider myself to be a complete newbie when it comes to the art of “selling” my knowledge and authority. If there is such a thing as a natural marketer, I am not he.

Earlier this year, I came across Brian Clark’s (of Copyblogger fame) online course called Teaching Sells. I was immediately intrigued. Here was a guy with a complementary skill set who was willing to teach me what he knew. Brian’s expertise is not in building web sites, but in writing and teaching: the other half of what I do.

So I signed up for the Teaching Sells mailing list and downloaded their free report with the great title, “Forget Everything You Know About Making Money Online… And Start Making Some.” And that report was pretty motivating for me. So when the class opened up in February, I signed up right away.

I started out very excited and motivated. The course is full of detailed information, and comes with a lot of worksheets and planning guides you can download and fill out to map what you’re learning to your own personal projects (I have a manila folder full of those worksheets). But then… well, I’ll admit it: I didn’t make it all the way through the course!

I got busy with work, with freelancing, with planning my wedding (only 17 days to go now!). But here’s one benefit of the program that I don’t think Brian and his crew tout loudly enough: Once you’re a member of Teaching Sells, you’re a member for life.

What does that mean? That means I can go back whenever I want, and I’ll still have access to the dozens of learning modules, the forums, the downloads, the interviews… and anything new they decide to add to the mix down the road. So my new and revised goal is to take up the class again this fall, start back up with a whole new group of motivated, excited students, and see if I can make it all the way through this time.

So if you’ve got a few minutes, take my advice: head over to Teaching Sells and watch the new video they have up that explains what it is they do better than I ever could (they’re the marketers, after all).

And if you think their pitch sounds plausible, sign up for their email list. You’ll get the free report, some case studies in your inbox to get you started, and once they open the doors to their class, you’ll be the first to know.

And if all goes well, I’ll see you in the forums.

(Note: Yes, the links above are affiliate links — past members of the program are given the option to be affiliates for future offerings. This means if you click one of those links and sign up, you’re helping CSS Newbie. However, even if there weren’t an affiliate program, I’d still recommend this course to anyone and everyone looking to learn the art of teaching online! So check it out.)

Read More

CSS Blog

While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.

Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!

Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.

The Problem: Sharing Syntax

The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:

$('#myelement').addClass('active');

And the same functionality in Prototype:

$('myelement').addClassName('active');

Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.

The Solution: noConflict Mode

But not to worry! jQuery has provided us with a workaround called “noConflict mode.”

By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:

$('#myelement').show();
jQuery('#myelement').show();

Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.

Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.

This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:

jQuery.noConflict();

This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().

Keeping it Short

The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:

var $j = jQuery.noConflict();

Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.

Read More

CSS Blog

There are some great websites out there. They are well planned, well executed, well designed and simply effective. For every great website there are three that are could be great, but fall short due to a few small areas of neglect.

We as a community and as an industry have become very good at most aspects of building websites. Just looking through a few CSS Galleries clearly shows the quality of design that is being produced and how much it has improved in just a few years. If you look a layer deeper and view the source of these websites you will see beautiful and semantic XHTML/CSS. It seems the days of table based layouts is finally gone.

The amount of functionality and rich experience that sites have now day are creative, impressive and engaging. Powerful javascript libraries such as jQuery, MooTools and prototype make it easy to produce these experiences rapidly and effortlessly.

But a website is more than the design, code and effects/functionality. Sometimes we have to rethink our approach and find out what is really important. What are the sites objectives and what are our users objectives? More often than not you will find that you could improve the following areas of your websites:

1. Web forms

While they are far from the sexiest part of web design, web forms are arguably one of the most important. In almost all cases a web form also functions as a conversion point (a point where a user performs an action that accomplishes a site objective).

Here a user is going to enter in some of their personal information so that they can get something in return. This establishes interest and provides the site owner with some valuable information.

Web forms are often neglected in two ways:

1. There is not enough attention in making them usable. This could be poor validation, improper labeling of required fields, making them too long or poor form layout.
2. There is not enough attention to what information is asked from the user.

You have a real opportunity to learn more about the people who use your website. That information can not only help you build a better website but also a better business. This marketing information could easily lead to R&D improvements and better products.

Do some research and learn how you can make more effective forms. Your clients, bosses and website owners will thank you many times over.

Resources

• Web Form Design: Filling in the Blanks
• Web form eye tracking studies

2. The Content

Content is king. In a recent study 25% of users noted that the number one reason they were to leave a website was due to “weak web copy.” The only reason anyone ever goes to any website is because of the content, yet so many website owners neglect the content. Despite it’s importance content becomes an afterthought. Appearance, search rankings and conversions tend to be the focal point of most web design projects. What we may forget is that with out great content you still have a poor appearance, you won’t rank high and no one will convert.

Rather than trying to write all of the content yourself, hire someone. It will be worth it, I promise you. If nothing else write the bulk of the copy and hire someone to make it consistent with the proper voice and tone.

Resources

• The Web Content Style Guide: The Essential Reference for Online Writers, Editors and Managers
• Quality Web Content

3. The Footer

With a little thought it becomes painfully obvious, most website footers are absolutely useless. A user takes the time and effort to read (or scan) through an entire page, and when they reach the bottom they are rewarded with links that don’t fit anywhere else, a copyright notice and maybe an address and phone number.

The point where page content ends is a very high action zone. That means that users who get to that point have a high probability of clicking on any link that comes below it. Rather than some meaningless legal links and an address create a footer that gives the user a place to find additional content that may interest them.

This could be:

• Related pages / articles / posts
• Links to rich media
• Latest news / updates
• Previously viewed pages
• A contact form
• Ways to save / share the page
• Newsletter sign up

Resources

• Footers in modern web design
• Footers with great usability

4. The Print Version

Many designers fail to realize how many people still prefer to print off websites rather than try and read them on screen. There are two significant benefits to paying attention to the print version.

The most obvious benefit is that it can improve the user experience of the site. Users who visit your site and print it out will actually read the content and are more likely to revisit the site and make an action (or conversion). If the printed version is difficult to read and work with they are highly likely to simply recycle the paper and forget they ever visited your site in the first place.

The second benefit is it could be a real competitive advantage. If a user prints off two web sites, and yours clearly has more attention to detail in the print version, they are much more likely to use your product/services over the competitors.

You can improve the print version simply by:

• Turning off unnecessary items such as the header, footer, navigation, search box etc…
• Changing the font to serif, increase the font size and space out the line height to make the print version more legible
• Adjust the columns or remove sidebars so that only the primary content prints out

Resources

• Print style sheets, a definitive guide
• Pro CSS Techniques

5. Analytics

How users behave and use a website is one of the most important factors you could possibly focus on. Despite this fact it is so commonly neglected by both website owners and website designers. Businesses need to spend more money on the analysis of user behavior and web design companies need to promote the service more heavily.

Even a website that is built using an effective strategy, user testing and best practices is a best guess at what will be most effective.

If you actually pay attention to how users behave and analyize that behavior you can discover countless ways to continually improve your website.

• Are users leaving a specific page more than others? Maybe they are not finding what they are looking for and that page can bet altered
• Do you have a page where a lot of people are entering the site other than the homepage? You need to start thinking of those pages as landing pages
• Are there important pages that don’t get a lot of traffic? Figure out how you can make those pages more prominent

Resources

• Web Analytics: An Hour a Day
• Occam’s Razor - web analytics blog

Read More

CSS Blog

Every once in a while I remember some functionality of CSS that we have had access too for ages yet is rarely taken advantage of in creative ways. The last time I really wrote about this is when I had discovered a way to make other menu items change when you hovered on just one of them, as you can see here in the Advanced CSS Menu Trick article.

Sometimes rediscovering these capabilities are valuable for creating new ways to add creative touches, such as the parallax scrolling effect. Other times they can greatly improve the usability and user experience of our sites. In some cases they do both.

I was recently reading through “The Elements of User Experience
,” which opens with a compelling story describing why things going wrong in your day could be the fault of poor design in regards to usability. Interestingly enough one of the points covered in this section is the use of feedback as a way to notify a user that something has occurred.

View the demo here

Most Web Designers Fail to Take Advantage of :active

In the case in the book they mention a coffee pot beeping so you know that it was switched on. This same principal of offering a user basic feedback applies to the web, yet we rarely see it used in all instances it can.

We have had the ability to style a links :active pseudo selector since CSS1, yet when was the last time you actually used it? I will admit that I am a grand offender as well, as I couldn’t tell you. However the value of such a subtle detail can have large benefits  to a users experience of the site. Not to mention it does give another avenue to enrich the interactivity of our interfaces.

An Common Example

If you have ever done any usability studies you will have probably run into a situation where things that seem incredibly simple end up taking significant amount of time. One of the most basic of these situations is that of clicking on a simple link. I have many times in my “behavior observing” career seen a user who thinks they have click on a link, despite having missed it slightly.

What follows is a long pause while they wait for the page to change, before getting frustrated and either blaming the internet, the site, or swirling the mouse to ensure the computer hasn’t locked up.

This could all be solved by simply giving the user feedback when a button is clicked. Interestingly enough flash based websites have done a better job through out history of accomplishing this than most HTML sites, done so by adding a subtle “clicking” noise as a link is clicked.

Of course I am not advocating the use of sound (as it fails on several accessibility levels among other issues), however it wouldn’t be hard to give the user some feedback to let them know the link was successfully clicked on.

What We Can Do

By using the :active selector in CSS we can give the user some feedback that a link has in fact been clicked. This way if there is any sort of delay the user knows that it is successful loading and they don’t have to reclick the link. This will make the site more usable and as more developers and designers begin to adopt this process the web itself will become more usable.

Additionally it opens up a new area for us designers to work our creativity. We can now think about what subtle design elements we can give links and buttons to indicate to the user that they have been clicked. In my example, a beveled button appears to be pushed inward.

It Isn’t Perfect

Despite the fact that it is a dramatic improvement over not having any feedback and it does give us more room to express our creativity, the functionality isn’t perfect. You may notice in the demo that if you click on a button quickly it changes so fast you might not even notice. You may not realize that there is even an effect giving you feedback.

Regardless, using :active will still enhance the user experience. Even if only 10% of your users notice it is worth the time and effort put into it. Additionally users who are less familiar with computers and the internet will be more likely to hold the mouse button down longer and thus notice the effect.

Consider Adopting it as a Regular Practice

I really advocate the adoption of it as normal standards based markup. If it becomes a convention than users will expect some sort of notification that a link was clicked and even it happens to fast on the pages that load right away, they know to look for it.

View the demo here

Read More

CSS Blog

Web development has gotten more complicated.

You’ve got to worry about a plethora of new issues that you’ve never thought about when you started doing this business: data asset management (DAM), you’ve got to build and code websites in no time fast, competition is fierce & everybody has their own web development company, you’ve got to keep your costs to a minimal, etc.

We’re here to give you one of those ideas that’ll do all of those things all at once. It’s pretty easy to do.  It took me forever but i’ve finally discovered how to use SVN via TortoiseSVN (TortoiseSVN seems to be the easiest way to do SVN. Update, commit, merge files are easily executed with 2-3 clicks). If you do not have the pleasure of owning a windows machine there are many other SVN alternatives for MAC. Such a syncrosvn and versions.

What’s TortoiseSVN?

TortoiseSVN is just a open source program that manages file versions. At 3 Point 7 Designs, we discussed some methods to collaborate and keep our files updated so redundancy didn’t happen. At much of my discovery, we discovered that we can use this to also host some of our template files that we use to speed up development.

We decided that we’d host and feature our companies css/xhtml boilerplate to foster collaboration and version tracking on Google Code (code.google.com). In addition to this beautiful solution, it allows google to host our redundant files that we use for every project. Google hosting has got to be the best hosting on the internet. You can’t beat anything faster than google; they practically run and own the internet.

We just link the files to the google code repository and voila we are up and running.

Featuring 3.7 Designs Boilerplate!

We’re big fans of css frameworks. CSS frameworks are great providing quality control. It provides us the ability to get our job done quickly, efficiently and more consistently.

The 3.7 Design Boilerplate contains the file structure and the files needed to quickly start coding. It might take a while to get a hang of our id/class usages. Nonethless, it’s pretty KISS and makes sense.

Folders Structure

The following are some folders and they’re pretty self explanatory
/css - CSS files
/images - Images
/js - Javascript Files
/clientfiles - PSD, .ai, etc files go here
/concepts - concepts - currently and eventually will be moved to client files
/copy - contains word documents or text for the content of the website

CSS Files Explained

Reset.css - Some things that we commonly practice is resetting stylesheets so that they’re all at a beginning point. This is something that Eric Meyer’s blogged about.

Grid.css - We’ve added a set of grids that you can use. It’s actually a gride from 960.gs. You’re welcome to switch out any grid stylesheet here.

helper.css - This file gives you a running start if you’re prototyping a page. You can quickly using classes move block elements around with margins or padding. An example class : “ml-5” adds 5px of padding to the left side. “mh-10″ adds left and right padding. “padr-5” provides 5 px of padding on the right side, etc.

This file also contains the very important class: clearfix. If you’re not familiar with it it just primarily solves the problems of container div’s that don’t totally addup the total height of all of the child containers.

main.css This file allows is to create a base file from the reset to provide some type of consistency and legibility to the type. Often after type is reset the type is too small  to read.

style.css This last file you’ll have to use locally because it’ll be key and important in customizing your website. All the other files you can link from the google code repository. This file is the file that will contain your site specific and context specific css code.

Download Boilerplate: Latest 2.0.zip

Put it all together

With all these things put together we are providing you with a starting point. If you don’t like the way we do things; that’s totally understandable. We’re hoping to inspire others to create their own or contribute to our project.

The best part of hosting your css files is that once you add more or append to your files it’ll effect all the websites that might be linking to your files.

Hope this has been most helpful.

Read More

CSS Blog