Skip to main content

Wonderful CSS Tools • Web Fonts & CSS

All web designers and developers should strive to simplify and code better CSS. Simplifying the code means faster load times and less bandwidth use. Imagine you are a large company that has to pay for each individual byte of bandwidth used. By simplifying the code involved and getting rid of the white space, the company could save hundreds of thousands, if not millions of dollars a year. That’s big money, even if it goes to the pockets of the CEO, less money ‘wasted’.
September 30, 2011

Secondly, and more importantly, if all designers were to simplify the coding of the CSS and add the new CSS3 properties to the mix we would become closer to having a universal compliance for all developers. This post is a collection of tools to help with your CSS skills. They will help to make your code more efficient and may even teach you some new cool CSS3 properties that we should be incorporating as designers that care about their profession.

CSS Lint

CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. There are tons of tools on the web that looks through your code and shrink it, validate it, and so on. But CSS Lint is one of the few that teaches you at the same time. By pasting a large amount of code into CSS Lint it will find inefficiencies and syntax errors. Instead of fixing the issues for you, it shows the problems that it finds. The benefit of this particular tool over tools that automate the code-cleaning is that it teaches you as a CSS programmer to be more efficient in your coding and to simplify your website designs.

Visit Site Here

The Web Font Combinator

With the use of web font usage web designers needed a tool that would allow fonts to be viewed next to each other. There have been many printed collections of font examples that the end user can combine in order to see how a header, body, footer, menu font will work together. However, there were no tools on the web that replicated this using the current web font technologies. Here are some of its features. A reverse button shows the difference for a dark background compared to a light background. The header and body text are both editable. You can hide each of the three elements by selecting the “hide this” selection in each of the drops down menus. Currently, this tool will only use fonts supplied by the Google Font Directory as well as common system fonts.

Visit Site Here

Layer Styles

Layer Styles is a web-based alternative for the creation of CSS. It makes a graphical representation of the style you are trying to produce. By using this tool you choose that style from the many that are already provided and then tweak it with colors and opacity until you get what you need. There is much more to this tool and it is worth your time to take a peek and see all the options it has to offer.

Visit Site Here



Written By • Jon D

Web Developer / Managing Director
Jon is a website designer in Flagstaff Arizona. He started with web design at the age of 17 where he created a website where he would test and choose the best software from around the internet. It was all hand coded with Homesite – at that time the best (in his humble opinion) HTML editor around. He believes in local economy, open source technology, and helps bring the best the internet has to offer to his clientelle.

Everything ‘By Design’

“I like it when a flower or a little tuft of grass grows through a crack in the concrete. It’s so fuckin’ heroic.
– George Carlin

Innovate & Illuminate Online!

Join our newsletter to discover the latest trends, tips, and technologies in website design and development, ensuring your online presence remains top notch.