CSS Frameworks: Design From Scratch

Dec 21

Jigar PanchalCSS, Design No Comments

You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone.

And this is where CSS Frameworks and CSS Reset are becoming important. Using them, you can get yourself a perfect default-stylesheet and markup, save your time and ensure the best quality of your code from the very beginning. But what are CSS Frameworks? And why do you need the Reset for?

Let’s take a look at the idea behind CSS Frameworks, their advantages and disadvantages, most popular CSS frameworks and dozens of default-stylesheets you can use designing a new web-site from scratch.

  • This article partially covers tools and techniques which use Grids. You might want to make sure you get the idea behind the grid-based design approach — from our article Designing With Grid-Based Approach.
  • You can find hundreds of CSS templates in our article Free CSS Layouts and Templates.
  • Please notice that this article takes a closer look at CSS Frameworks, not at extensive server-side programming frameworks such as CakePHP and also not at Web Development Environments such as Coda or Dreamweaver.

What is a CSS Framework?

  • A framework is a basic (usually abstract) conceptual structure which you can use as a “scratch” for your web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again — every time you work on a new project — you can prepare a default-style once and reuse it in all your future projects. This is what you call a CSS Framework.
  • CSS frameworks don’t have to be complex or large, they may contain a set of simple CSS-styles such as
    • typography.css for basic typographic rules,
    • grid.css for grid-based layouts or
    • layout.css for general layouts,
    • form.css for basic form styling,
    • general.css for further general rules

    and so on. In your code segmentation you can also go further, for instance: structure, typography, design presentation, specialist sections (e.g. menus, navigation), print, mobile web, tweaks (mostly old style browser hacks), browser specific workarounds (via IE conditional statement). “On the whole code segmentation in frameworks is handy to work with, but it can add some real load to a server with the extra http request per page view.” [Treading Lightly With CSS Frameworks, by Gary Barber]

  • “[Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft]

Advantages of CSS Frameworks

  • You increase your productivity and avoid common mistakes.
    If you develop several sites of the similar nature, an abstraction of CSS code can dramatically speed up your productivity, help you to avoid common mistakes and simplify the management of CSS code.
  • You normalize your code/class base.
    You have a common “default” CSS-code and (X)HTML-markup, so you always use the same IDs and class names in your projects. Code consistency throughout a number of projects makes it’s easier for you to maintain a web-site without digging into the source code of every project you’ve ever worked on — to understand how you’ve actually built the web-site. More

CSS Gradient Text

Nov 18

Jigar PanchalCSS, Design , No Comments

Benefits

  • This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
  • It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
  • You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

CSS Gradient Text Effect image 1

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!–[if lt IE 7]>

<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>

<![endif]–>

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>
$(document).ready(function(){

//prepend span tag to H1
$(“h1″).prepend(“<span></span>”);

});
</script>

More samples

Want to make Web 2.0 glossy text?

CSS Gradient Text Effect image 2

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

CSS Gradient Text Effect image 3

CSS Gradient Text Effect image 4

CSS Gradient Text Effect image 5

CSS Gradient Text Effect image 6

CSS Gradient Text Effect image 7

CSS Gradient Text Effect image 8

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

CSS Gradient Text Effect image 9

Limitations and more…

  • This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
  • IE PNG hack is required if you want it to work on IE 6.
  • If your gradient image is taller than the heading, the text will not be selectable.

CSS Gallery

Nov 05

Jigar PanchalCSS, Design, Links No Comments

  1. Design Float
  2. Kyle Prier Freelance Web Design
  3. Fresh Apps for the iPhone
  4. web portfolio of new york city base
  5. STIAHNI-TO.SK – software download
  6. OMC Furniture Design
  7. Pennsylvanai Christmas & Gift Show
  8. Best Photo Blog
  9. Free Illustrations
  10. Life is a Battle
  11. UniqueCSS.com – Unique CSS Designs
  12. Love the Lakes
  13. Doodie\’s Doodles
  14. Yoursiteisvalid
  15. Skyron
  16. Screenshots of the new Wordpress2.7
  17. Uni.Lab OWL
  18. Before After
  19. Artsilo – free stock photos
  20. Digitalmash
  21. cms themes showcase

One more CSS website

Nov 05

Jigar PanchalCSS, Design, Links No Comments

Just found this useful baby!

http://www.cssdrive.com
:)