Home
 

24

Mar

1

An Example CSS Framework

Attached Files


CSS_Framework.zip(5.8 KB)

A CSS framework is a set of pre-prepared style sheets that can be used as a starting point for any project. Using a framework allows you to skip all the tedious parts of getting the basics right and lets you start working on what makes your site different from the beginning.

There are numerous advantages to using a CSS framework, including cross browser compatibility, increased productivity and improved consistency between projects. The framework provided here is aimed at those developing sites using the SilverStripe CMS, but is just as useful for anyone developing a CSS based layout.

The files included are:

  • test_page.html - Sample HTML 4.1 strict page for use testing and developing the CSS. This will later form the starting point for making your templates.
  • layout.css - This is the core layout and contains all the wrappers, menus and page elements styling.
  • typography.css - This contains all the content styles for elements such as fonts, links and headers.
  • form.css - Contains all the styles for forms. This file is the same one as is included with the silverstripe blackcandy theme in v2.3.
  • ie6.css - Holder for any future (inevitable!) Internet Explorer 6 fixes. Conditionally included into the template HTML file when the browser is IE6.
  • ie7.css - As above but for the slightly improved yet still temperamental Internet Explorer 7.

 

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

Aram is a web designer/developer running London based agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Comments (1)

  • Hi there,

    I already understand the current css layout thanks. I'm really keen to intergrate versions of my website though for different screen size and screen resolution variables.

    Eg. Java Script in Page.ss is currently buggy because of typography.css and form.css.

    I currently have a detect.js file and would like it to call a different .css or silverstripe theme.
    The following text for my detect.js is:

    $(document).ready(function() {

    if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth>12))
    {
    $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
    }

    if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth<=12))
    {
    $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Large.css"});
    }

    if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth>12))
    {
    $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Small.css"});
    }

    if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth<=12))
    {
    $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Small.css"});
    }

    else
    {
    $("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
    }
    });

    Posted by edenview, 25/07/2010 10:30pm (3 days ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment