SPAN Simple Responsive Fluid Minimalistic CSS Framework

Download on Github

In an attempt to offer some sort of contribution to the web development world, I have decided to put out the SPAN Simple CSS Framework. It’s meant to be a very minimalistic, out-of-the-box CSS framework, and I use the term ‘framework’ very loosely.

A lot of frameworks come with bells and whistles, and that was not my goal in this.  They almost always took on their own unique styling and after a while became recognizable.  Frameworks like Bootstrap were great, but could be identified from a mile away.  Doing custom web development often meant that the style needed to be custom, too.

I would spend so much time coding and customizing the framework, I should have just started from scrap anyway!

The entire point of this framework is to get the absolute bare minimum set up that is relatively easy to learn and rely on.  It’s also very easy to build upon and begin customizing.

This framework does NOT:

  • Take care of resetting all browser styling.
  • Cover all browser quirks and shortcomings.

This framework is:

  • HTML5 and CSS3 compliant.
  • Fluid & Responsive
  • Minified to be only 1.02KB

Getting Started

Download from Github

The entire basis on the framework is that there are containers, rows, and then “SPANs” that total 100%.  For example, if you wanted a row with 4 columns equaling 25%, your markup would look like this:

<div class="container">
  <div class="row">
    <div class="span25"></div>
    <div class="span25"></div>
    <div class="span25"></div>
    <div class="span25"></div>
  </div>
</div>

span-simple-framework

So, to illustrate this, there is a container that spans 100%, there is a row that spans 960 pixels, then there is a div with a class .span25 that spans 25% of it’s container.

The SPAN Div Class

The grid is defined by the class .span proceeded by the number of percentage you’d like the column to be in width.  All classes that begin with the name “span” carry this behavior:

div[class*='span'] {
	float:left; margin:0px auto; height:auto;
}

Here is a full list of the available numerical amounts for each of the span classes:

.span5 { width:5%; }
.span10 { width:10%; }
.span15 { width:15%; }
.span20 { width:20%; }
.span25 { width:25%; }
.span30 { width:30%; }
.span33 { width:33%; }
.span35 { width:35%; }
.span40 { width:40%; }
.span45 { width:45%; }
.span50 { width:50%; }
.span55 { width:55%; }
.span60 { width:60%; }
.span65 { width:65%; }
.span66 { width:66%; }
.span70 { width:70%; }
.span75 { width:75%; }
.span80 { width:80%; }
.span85 { width:85%; }
.span90 { width:90%; }
.span100 { width:100%; }

With these, you can mix and match any combination.  Ideally, you would want it to total 100%, but that’s not necessarily the case if you start a new <div class=”row”> instead.

Clearing Elements

That’s pretty simple.  Just use a div with a class of ‘clear’.

<div class="clear"></div>

Determining the row size.

Rows are set to be 1080 pixels wide.  The different div span classes do not need to be contained within a row, and they will adjust since the widths are percentages.  You can adjust the row sizing by simply changing the max-width property.

Spacing, Padding, and Responsive Spacing

The .span classes are meant to include padding in the widths using the CSS property of box-sizing:border-box.  This was done intentionally because the hope was to have this framework be more flexible to other applications.  You can always adjust your margins in the universal selector for all of the columns.

 

That’s about it.   My whole intention was to have it be relatively easy to learn and improve upon.  I wanted a framework that let me build upon it really quickly.

Any comments or suggestions are welcome.

Leave A Comment

Your email address will not be published. Required fields are marked *