A CSS Framework/Skeleton?

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

A month or so ago I was thinking it would be nice to have a universal CSS layout framework (or something like that) that anyone could use to create a layout for their site. What a layout is, is just columns/rows without any real coloring (besides the colors to differentiate between the columns/rows). No real design or a site, but a simple layout. After the layout is done, that is when you start "coloring the site" with colors or filling it with images... whatever the case may be.

I know that this has being done and probably so many times that I'm reinventing the wheel here :lol: It was a good challenge for me and a learning experience in terms of CSS and layout design. What I'm talking about is being able to create an entire layout with just a few declarations. A declaration simply for a column (and only a column) so it would have the height, padding and float definitions set. Then it would have for the size of it and the color... three different declarations for 1 column...

Below is what I came up with. Any ideas?

CSS Code: [ Select ]
html, body
{
    margin: 0;
    padding: 0;
}
 
.container
{
    clear: both;
    width: 100%;
    min-width: 600px;
}
 
.row
{
    width: 100%;
    float: left;
    height: auto;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px auto;
}
 
.column
{
    float: left;
    height: auto;
    padding-left: 1%;
    padding-right: 1%;
}
 
.cols2 {
    width: 48%;
    float: left;
    height: auto;
    padding-left: 1%;
    padding-right: 1%;
}
 
.cols3 {
    width: 31.333%;
    float: left;
    height: auto;
    padding-left: 1%;
    padding-right: 1%;
}
 
.short
{
    width: 18%!important;
    background-color: #cecece;
}
 
.long
{
    width: 78%!important;
    background-color: #dedede;
}
 
.bg1
{
    background-color: #cecece;
}
 
.bg2
{
    background-color: #dedede;
}
 
p
{
    margin: 0;
    padding: 5px 0;
}
 
p.right
{
    clear: right;
    float: right;
}
  1. html, body
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.  
  7. .container
  8. {
  9.     clear: both;
  10.     width: 100%;
  11.     min-width: 600px;
  12. }
  13.  
  14. .row
  15. {
  16.     width: 100%;
  17.     float: left;
  18.     height: auto;
  19.     display: block;
  20.     padding-top: 5px;
  21.     padding-bottom: 5px;
  22.     margin: 0px auto;
  23. }
  24.  
  25. .column
  26. {
  27.     float: left;
  28.     height: auto;
  29.     padding-left: 1%;
  30.     padding-right: 1%;
  31. }
  32.  
  33. .cols2 {
  34.     width: 48%;
  35.     float: left;
  36.     height: auto;
  37.     padding-left: 1%;
  38.     padding-right: 1%;
  39. }
  40.  
  41. .cols3 {
  42.     width: 31.333%;
  43.     float: left;
  44.     height: auto;
  45.     padding-left: 1%;
  46.     padding-right: 1%;
  47. }
  48.  
  49. .short
  50. {
  51.     width: 18%!important;
  52.     background-color: #cecece;
  53. }
  54.  
  55. .long
  56. {
  57.     width: 78%!important;
  58.     background-color: #dedede;
  59. }
  60.  
  61. .bg1
  62. {
  63.     background-color: #cecece;
  64. }
  65.  
  66. .bg2
  67. {
  68.     background-color: #dedede;
  69. }
  70.  
  71. p
  72. {
  73.     margin: 0;
  74.     padding: 5px 0;
  75. }
  76.  
  77. p.right
  78. {
  79.     clear: right;
  80.     float: right;
  81. }

HTML Code: [ Select ]
<html>
    <head>
        <title>Design Test</title>
        <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>
    <body>
        <div class="container">
            <!-- 3 Even Width Columns Test //-->
            <h1>3 Even Width Columns</h1>
            <div class="row">
                <div class="cols3 bg1">
                    <p>Testing Text</p>
                </div>
                <div class="cols3 bg2">
                    <p>Testing Text 2</p>
                </div>
                <div class="cols3 bg1">
                    <p>Testing Text 3</p>
                </div>
            </div>
           
            <!-- 2 Even Width Columns Test //-->
            <h1>2 Even Width Columns</h1>
            <div class="row">
                <div class="cols2 bg2">
                    <p>Testing Text</p>
                </div>
                <div class="cols2 bg1">
                    <p>Testing Text 2</p>
                </div>
            </div>
           
            <!-- Left Short Column, Right Long Column Test //-->
            <h1>Left Short Column, Right Long Column</h1>
            <div class="row">
                <div class="cols2 short">
                    <!-- Two Columns Within A Column Test //-->
                    <h1>Two Columns Within A Column</h1>
                    <p class="right">Some Text</p>
                    <p class="right">Some Text 2</p>
                    <p class="right">Some Text 3</p>
                    <p class="right">Some Text 4</p>
                    <p class="right">Some Text 5</p>
                    <p class="right">Some Text 6</p>
                    <p class="right">Some Text 7</p>
                    <p class="right">Some Text 8</p>
                    <p class="right">Some Text 9</p>
                    <p>Testing Text</p>
                    <p>Testing Text 2</p>
                    <p>Testing Text 3</p>
                    <p>Testing Text 4</p>
                    <p>Testing Text 5</p>
                    <p>Testing Text 6</p>
                    <p>Testing Text 7</p>
                    <p>Testing Text 8</p>
                    <p>Testing Text 9</p>
                    <p>Testing Text 10</p>
                </div>
                <div class="cols2 long">
                    <p>Testing Text 2</p>
                </div>
            </div>
           
            <!-- Left Long Column, Right Short Column Test //-->
            <h1>Left Long Column, Right Short Column</h1>
            <div class="row">
                <div class="cols2 long">
                    <p>Testing Text</p>
                </div>
                <div class="cols2 short">
                    <p>Testing Text 2</p>
                </div>
            </div>
           
            <!-- 5 Short Columns Test //-->
            <h1>5 Short Columns</h1>
            <div class="row">
                <div class="column short bg1">
                    <p>Testing Text</p>
                </div>
                <div class="column short bg2">
                    <p>Testing Text 2</p>
                </div>
                <div class="column short bg1">
                    <p>Testing Text 3</p>
                </div>
                <div class="column short bg2">
                    <p>Testing Text 4</p>
                </div>
                <div class="column short bg1">
                    <p>Testing Text 5</p>
                </div>
            </div>
           
            <!-- End Of Tests //-->
        </div>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <title>Design Test</title>
  4.         <link rel="stylesheet" type="text/css" href="layout.css" />
  5.     </head>
  6.     <body>
  7.         <div class="container">
  8.             <!-- 3 Even Width Columns Test //-->
  9.             <h1>3 Even Width Columns</h1>
  10.             <div class="row">
  11.                 <div class="cols3 bg1">
  12.                     <p>Testing Text</p>
  13.                 </div>
  14.                 <div class="cols3 bg2">
  15.                     <p>Testing Text 2</p>
  16.                 </div>
  17.                 <div class="cols3 bg1">
  18.                     <p>Testing Text 3</p>
  19.                 </div>
  20.             </div>
  21.            
  22.             <!-- 2 Even Width Columns Test //-->
  23.             <h1>2 Even Width Columns</h1>
  24.             <div class="row">
  25.                 <div class="cols2 bg2">
  26.                     <p>Testing Text</p>
  27.                 </div>
  28.                 <div class="cols2 bg1">
  29.                     <p>Testing Text 2</p>
  30.                 </div>
  31.             </div>
  32.            
  33.             <!-- Left Short Column, Right Long Column Test //-->
  34.             <h1>Left Short Column, Right Long Column</h1>
  35.             <div class="row">
  36.                 <div class="cols2 short">
  37.                     <!-- Two Columns Within A Column Test //-->
  38.                     <h1>Two Columns Within A Column</h1>
  39.                     <p class="right">Some Text</p>
  40.                     <p class="right">Some Text 2</p>
  41.                     <p class="right">Some Text 3</p>
  42.                     <p class="right">Some Text 4</p>
  43.                     <p class="right">Some Text 5</p>
  44.                     <p class="right">Some Text 6</p>
  45.                     <p class="right">Some Text 7</p>
  46.                     <p class="right">Some Text 8</p>
  47.                     <p class="right">Some Text 9</p>
  48.                     <p>Testing Text</p>
  49.                     <p>Testing Text 2</p>
  50.                     <p>Testing Text 3</p>
  51.                     <p>Testing Text 4</p>
  52.                     <p>Testing Text 5</p>
  53.                     <p>Testing Text 6</p>
  54.                     <p>Testing Text 7</p>
  55.                     <p>Testing Text 8</p>
  56.                     <p>Testing Text 9</p>
  57.                     <p>Testing Text 10</p>
  58.                 </div>
  59.                 <div class="cols2 long">
  60.                     <p>Testing Text 2</p>
  61.                 </div>
  62.             </div>
  63.            
  64.             <!-- Left Long Column, Right Short Column Test //-->
  65.             <h1>Left Long Column, Right Short Column</h1>
  66.             <div class="row">
  67.                 <div class="cols2 long">
  68.                     <p>Testing Text</p>
  69.                 </div>
  70.                 <div class="cols2 short">
  71.                     <p>Testing Text 2</p>
  72.                 </div>
  73.             </div>
  74.            
  75.             <!-- 5 Short Columns Test //-->
  76.             <h1>5 Short Columns</h1>
  77.             <div class="row">
  78.                 <div class="column short bg1">
  79.                     <p>Testing Text</p>
  80.                 </div>
  81.                 <div class="column short bg2">
  82.                     <p>Testing Text 2</p>
  83.                 </div>
  84.                 <div class="column short bg1">
  85.                     <p>Testing Text 3</p>
  86.                 </div>
  87.                 <div class="column short bg2">
  88.                     <p>Testing Text 4</p>
  89.                 </div>
  90.                 <div class="column short bg1">
  91.                     <p>Testing Text 5</p>
  92.                 </div>
  93.             </div>
  94.            
  95.             <!-- End Of Tests //-->
  96.         </div>
  97.     </body>
  98. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 82 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.