I am new to Sass, and I am exploring using your grid with it, which is already awesome. Is there a @extend to use the hide-on-tablet or hide-on-mobile classes on a div in a scss file, or do we just apply that class manually in the html?

Hi Guy, is it possible that i can set a fixed with for one col, and let the other col regular with %. I test it and set for the Nav Row a fixed Width, Floating, Padding, and let the Contentside regular with %... Works well but at the point with resizing..... The Content slips down under the Nav :-/

I want a layout like this...

Header
Nav Px | Content %
Footer

Hi,
is there any documentation how to use unsemantic with rails/compass?

Incorrect border condition for minimal width in unsemantic-grid-responsive.css ,line 760.
Device, which has screen width equal to min-width (768px) shows desktop version, dut should show mobile. Fix
@media screen and (min-width: 769px) {

Hi there,

I'd like to centrally align the footer text on mobile views only (but not desktop or tablet views). Is this possible?

I have a div within the footer that has the following class: <div class="grid-25 tablet-grid-25 mobile-grid-100"><!-- footer text --></div>

I've tried the following CSS: footer .mobile-grid-100 { text-align: center; }

This centrally aligns the text for mobile (which is what I want), but it has the unintended side effect of centering the footer text in the tablet and desktop views too. Is there any way to target just mobile for certain styles in the CSS?

Thanks for any advice on this,

Stephen

Is it possible to add a zero left/right padding similar to .alpha and .omega in 960.gs?

This happens everytime we use this framework. In-line li's wrap. There is more on this issue here:
http://stackoverflow.com/questions/11540268/prevent-wrapping-of-menu-items

If there is a fix for this, unsemantic would be absolutely perfect.

Hey

So love the optional tablet support you've added - just moded the css myself for a little test project before seeing it as there seems to definitely be an awkward middle ground with my fluid layouts around about just before and just after the standard mobile break point (ipads in landscape - angryface)

Awkward moment #2 : 8 columns across without using nested grids - (my use case was client logos generated dynamically in WordPress with grid-10 being too small and grid-15 with 5 either side of the container being a bit large).

any chance of a grid-12point5 ? (I'm sure it could have a better class name :) )

I think it will be nice if you start to use git tags. If you do so, people that is developing using unsemantic and bower can easily control the version they are using without having to set a commit hash, and allowing to take update minor releases like "1.2.*"
This will avoid conflicts with new versions.

I have been using the unsemantic-grid-responsive.css which works great however on ie 7 & 8 it doesn't seem to work. I've added the shim but no luck.

Does order matter in this case? Or is it the case that ie 7 and 8 dont support media queries?

Maybe i've missed something simple.

I know there was an issue similar to this, however it seems to be different

Here: http://unsemantic.com/css-documentation#4-mobile-amp-hidden-classes

It only mentions mobile-* classes but not that those classes are also available for tablet-* which is quite irritating.

Hi Nathan

Whipped up a quick PSD template for unsemantic for myself today (at 1200 wide), would you like to include it for others to use ? I'l be doing a mobile one shortly as well, but let me know, thought others fans of unsemantic may get some use out of it.

can we have a LESS version of this awesome grid system ?

nested grid containers should have padding set to 0.

I often have divs "banner" and "account" and "search" inside a div "header". I want to use the grid container not just for my "header", "content" and "footer" but within those general content sections as well.

Am I just straight up missing something here? It seems like a common use case, and I don't object to the parent .grid-container having default padding. Right now I am using inline styling of padding:0 to achieve what I want.

Hello,

Just curious regarding the CSS "grid-container" -- Should only one exist on a page and act as the wrapper for all other grid-xxx's on the page? .. or is it ok to nest grid-containers?

Since this is a 960px grid, shouldn't a tablet with 1024 resolution in landscape be able to display the desktop view?

In my opinion the rule: @media screen and (min-width: 767px) and (max-width: 1026px) { should be @media screen and (min-width: 767px) and (max-width: 980px) {

What do you think ?

I just tried a test page using IE 8 -- the test page was:

http://unsemantic.com/demo-responsive

Does not work under IE 8 -- is it supposed to? confused as to what combination of includes / javascript / non-javascript is supposed to work on different browsers.

This page does work with IE 8:

http://unsemantic.com/demo-adapt

... but I was looking for a solution that did not involve javascript hacks, etc. -- is this the only way to support IE 8 ???

what does hide on mobile and desktop does...

Hey, maintainer(s) of nathansmith/unsemantic!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library nathansmith/unsemantic is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "nathansmith/unsemantic",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I've been using unsemantic for a good while now and am very happy. Thanks for the simple framework.

I've now run into the classic problem of content reordering. Namely I have content that I'd like to be at the end of it's grid-parent on mobile and the push pull classes aren't going to cut it.

I've done a little research:

http://www.jordanm.co.uk/lab/contentchoreography

http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

These have let me know that clearly my problem is not at all unique.

Is this something that you could see as a feature of the framework or something you'd not want in the project, or as a module, etc? Any response of course is fine, but if you could see something like this being included I could potentially open up a pull request once I try this out locally.

I'm heading down the flexbox path.

I'm trying to run this through Fire App but it's giving me strange errors. Could it be because it's not scss but saas files?

Disordered rows

• 33-33-33
• 66-33
• Almost every rows in Push pull section

All above rows disorder with browser width range from 785px to 1240px.

Tested with

Chrome dev-channel 28.0.1500.11
Windows 8
in Official Demo pages Responsive LTR and Adopt.js LTR

Screen shots

Hello,

New to unsemantic -- and although the documentation is well written something that is unclear for newbies are the files that are REQUIRED to be included in the "<head>" section of the HTML document (yes, I understand it "depends" on what you are doing), but ...

For an "out-of-the-box solution" ( desktop/mobile solution ), the following code would be required in the head section of the document -- correct?

<!--[if lt IE 9]>
<script src="/inc/js/html5.js"></script>
<![endif]-->
<!--[if (gt IE 8) | (IEMobile)]>
<link rel="stylesheet" href="/inc/grid_responsive.css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/inc/ie.css" />
<![endif]-->

Also -- you will notice the slight difference from the code on unsematic, ie: on the unsemantic site, a portion of the above conditional is coded as

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="./stylesheets/application.css?1382394700" />
<!--<![endif]-->

Why are the (extra?) (first line) and <!-- (last line)? What purpose do the empty comment block and opening comment block serve?

Thanks in advance and for the wonderful framework.

Little new to the framework, but I'm building a site using Unsemantic, and have designed using the mobile grid. The design is responsive when I resize my browser window on my desktop, but my iPhone 5 renders the desktop/tablet version.

Hi, I'd like to use unsemantic for a mobile site and have a beginner question regarding where to put additional styles. Having used other projects like Bones and Skeleton, which provided the frameworks of SASS files for each size breaking point to be filled out, I'd expect to do the same here.

To sum it up, should I be creating my own SASS/CSS files, or should I be filling out the existing SASS files? If the latter, where do I need to be making the changes? Again, totally a beginner question, but would appreciate some guidance.

what purpose does this fulfill .?

I have read through your source code, sorry for the attitude in head but I can't find another exact way to express myself. English is poor

You have lots of files under sass and sass/partials folders and most of them seem similar to me

_unsemantic-grid-mobile
_unsemantic-grid-mobile
_unsemantic-grid-tablet

The difference among them is class name prefix, Nothing else, the effect is same

And I don't understand what do you want to accomplish with .hide-on-mobile, .hide-on-tablet. Do you encourage we use those class with javascript to design website?

Is there something I missing? thk for your time

Hi
It seems that you have doubled code in files unsemantic-grid-desktop.css and unsemantic-grid-mobile.css

Ups sorry, already solved.
Hi
compass gives me a lot of Deprecated Warnings
"DEPRECATION WARNING on line 73 of /opt/local/apache2/htdocs/helium/fileadmin/test-apotheke/res/css/sass/partials/_unsemantic-grid-mobile.scss:
@extending an outer selector from within @media is deprecated.
You may only @extend selectors within the same directive.
This will be an error in Sass 3.3.
It can only work once @extend is supported natively in the browser."
are you working on this or can i fix it?

thx

hay there,
when using mobile-grid on a mobile hd-screen(like the lenovo p780) the page won't get re sized. My quick n dirty fix was sth like this:

@media screen and (max-width: $media-mobile-max),screen and (min-resolution: 2.0dppx) and (max-width: $media-mobile-max*2)
  @import "unsemantic-grid-mobile"

@media screen and (min-width: $media-desktop-min*2)and (min-resolution: 2.0dppx),screen and (min-width: $media-desktop-min) and (max-resolution: 1.0dppx)
  @import "unsemantic-grid-desktop"

but isn't perfect at all.
Regards
Lukas

Hi,

This isnt an issue really, more of a question, I am wondering if it is possible for an element to break out of the grid.

For example, within the grid I want to make a menubar under the logo that has a background which is the full width of the window. I still want the menu items to be within the grid container alignment.. For example, see http://beauty.com the white menu bar goes full width.

I dont think there is a way to do this with unsemantic, but I figured I would ask...

Using the latest SASS/Compass, compiling shows the following error:

DEPRECATION WARNING on line 71 of unsemantic/assets/sass/partials/_unsemantic-vars.sass:
  @extending an outer selector from within @media is deprecated.
  You may only @extend selectors within the same directive.
  This will be an error in Sass 3.3.
  It can only work once @extend is supported natively in the browser.

I'm sure you're aware, just wanted to point it out. Thanks for the code.

When using sass I get an exception for missing @import "compass/css3"

I stumbled upon this the other day and am greatly intrigued with this framework.

I am currently playing around with the demo and mocking up a couple examples of my own just to see how everything works.

Question: Does anybody know of some live web sites that are using Unsemantic? I would like to see what others are doing with it and how others are using it to implement responsive design?

NOTE: Sorry if I have placed this in the wrong area. I am fairly new to GitHub. My apologies if I did this wrong.

Hi Nathan,

I've recently started using Unsemantic, after being a long-term user and lover of 960.gs. Great work on these! :)

I've got one bugbear when using Unsemantic in comparison with 960.gs though - the use of hyphens (or dashes) in the class names, instead of underscores.

It's nice to be able to double-click a class in 960.gs, such as grid_12, and have the whole class get selected in my text editor. Whereas, when using Unsemantic, double-clicking grid-100 would select just the word 'grid' or '100', and you have to manually select the whole thing.

It might seem like a minor knit-pick, but in day to day use, I feel that the underscores do make it nicer to work with - I think grid_100 would be much nicer to use than grid-100.

So this 'issue' is to ask why you didn't go with underscores for Unsemantic (as I'm curious if there's a specific reason behind it), and to ask if there's any chance of this being changed to underscores in a future version?

Thanks,

Stephen

unsemantic-grid-responsive.css and the like...

@media screen and (min-width: 767px) {

• change to -
  @media screen and (min-width: 768px) {

I believe this bug is there because a tablet grid would fill the gap, however this grid is only for desktop to mobile.

P.S. - Loving the grid so far!

P.P.S. - I read your reasoning behind the default padding on grid-x. I either don't understand it (probably because I haven't used push/pull), or I don't agree. :p

P.P.P.S. - I know this could be said for any grid-x, but I really wish there were (*-)grid-1 - 4.

Recently I started messing around with this framework, but it's seems that using grids and flexible images css markup doesn't work together. Is there a way for solving this problem?

First of all, kudos on unsemantic. I don't use anything else now. In my humble opinion, this is simultaneously the simplest, most flexible and best thought out grid system.

I have run into an issue on several projects however. In some cases when I need to push/pull a grid cell, I don't want to do it when on mobile. For example, I might use something like

<div class="grid-75 push-25 mobile-grid-100">...</div>

The problem here is that the mobile layout gets funky as the push-25 and mobile-grid-100 conflict.

Perhaps we can add a couple of classes like mobile-clear-push and mobile-clear-pull, or some other mechanism to manage this scenario a bit better?

What do you think?

Opening http://unsemantic.com/ on IE 8 displays the following message and does not style any of the elements.

Syntax error: Undefined variable: "$media-query-breakpoint".
        on line 6 of ./sass/partials/_ie.sass
        from line 9 of ./sass/ie.sass
1: /Users/nathansmith/Projects/unsemantic-site/sass/ie.sass 

IE9 appears to be fine.

FIrst of all, this is a great solution to responsive development. I used it on a site found here http://fire.h50.us/~greensen and was very impressed with its ease of use and flexibility.

On this site, in any IE version less than 9 it is breaking horribly. I used this style sheet from your site
http://unsemantic.com/stylesheets/unsemantic-grid-responsive-tablet.css?1361229050
Which I thought had the IE hacks built in. Do you have an tips on how to make it work?

I didn't see a previous ticket regarding this, but I tried following your documentation to re-arrange two columns on the mobile portion of my site, but all the push and pull seems to do is push the columns to the left or to the right. I cant get them to actually switch places. Any tips?

http://h1webdesign.com/cam-center

I am trying to make the center (middle column on mobile) the left (top column on mobile)

I'm not an English major, but this does seem to exist as a word: http://dictionary.reference.com/browse/nonsemantic
Although it would mean "not pertaining to semantics", where "unsemantic" is usually used as "describing inaccurate semantic", so I'm not sure if it works 1:1

Anyway, just wanted to be a dick, feel free to close :)

I'm having trouble getting the unsemantic-grid-responsive.css to work properly with the Opera-Mini browser. On just any other mobile browser I could get my hands on it works fine. However on Opera-Mini, the right padding to the border of the screen is missing. The floats seem to be correct, but I don't have 10px padding on the right. Not sure what the reason is, even Opera-Mobile works fine. Heard of some viewport issues with O-Mini and tried to add
@media screen and (max-width: 400px) {
@-o-viewport {
width: device-width;
}
}
but without any success.

You can reproduce this issue with your site unsemantic.com as well when you open it in Opera-Mini.

Hi there,

I keep coming up against an issue with Unsemantic (and in 960.gs before that) where columns of differing heights would cause the layout to break. So I'm just posting to ask about the best way of dealing with this.

Here's a screenshot of what I'm talking about: http://cl.ly/image/0s222r1Y0a3Z Here, you can see that as the 'Web Design' column has more content than the other columns, it causes the 'PPC' column to drop down a row, so breaking the layout.

Here's the code I'm using for these columns (where the grid-33 div is repeated for however many pieces of content there are in the CMS):

<section class="grid-100 grid-parent">

  <div class="grid-33 tablet-grid-50">
    <h2><a href="#">Title goes here</a></h2>
    <p>Content goes here.</p>
    <a href="#">Find out more &raquo;</a>
  </div><!-- grid-25 -->

</section><!-- grid-100 -->

At the moment, my workaround has been to inject a clearing div after every 3 columns to stop this from happening. Here's a screenshot of the result: http://cl.ly/image/1t1B2I3z0f04

This workaround worked fine when using 960.gs (albeit, it felt a little hacky), but now I'm using Unsemantic, it doesn't work as well. This is due to the responsive breakpoints, where the desktop, tablet and mobile layouts can show different numbers of columns per row, so the injected clearing div can't always be in the correct place.

For example, if you're using say, 2 columns for tablet and 3 columns for desktop, then fixing this issue using the above method for desktop will break it for tablet, as the clearing div is appearing in the wrong place. See this screenshot of the tablet view: http://cl.ly/image/3z0S07193P2z.

So I'd appreciate any advice on the best way of dealing with this.

Thanks,

Stephen

Description

Unable to compile SASS files

Context

• OS: Ubuntu 10.04
• Ruby: 1.8.7
• Compass: 0.12.2

Step to reproduce

$ git glone git://github.com/nathansmith/unsemantic.git
$ cd unsemantic
$ compass compile --config config.rb --force

Expected result

Successful SASS file compilation

Actual result

    error assets/sass/unsemantic-grid-base-no-ie7.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-no-ie7.css 
    error assets/sass/unsemantic-grid-responsive-tablet-no-ie7-rtl.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-desktop-no-ie7.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-desktop-no-ie7.css 
    error assets/sass/unsemantic-grid-mobile-no-ie7-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-mobile-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-mobile.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-mobile.css 
    error assets/sass/unsemantic-grid-desktop-no-ie7-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-desktop-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-tablet-no-ie7-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-tablet-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-tablet-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-tablet-rtl.css 
    error assets/sass/unsemantic-grid-base-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-rtl.css 
    error assets/sass/unsemantic-grid-desktop.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-desktop.css 
    error assets/sass/unsemantic-grid-responsive.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive.css 
    error assets/sass/unsemantic-grid-base.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base.css 
    error assets/sass/unsemantic-grid-base-tablet.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-tablet.css 
    error assets/sass/unsemantic-grid-base-tablet-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-tablet-rtl.css 
    error assets/sass/unsemantic-grid-mobile-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-mobile-rtl.css 
    error assets/sass/unsemantic-grid-responsive-tablet.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-tablet.css 
    error assets/sass/ie.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/ie.css 
    error assets/sass/unsemantic-grid-base-tablet-no-ie7.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-tablet-no-ie7.css 
    error assets/sass/unsemantic-grid-responsive-tablet-rtl.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-tablet-rtl.css 
    error assets/sass/unsemantic-grid-tablet.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-tablet.css 
    error assets/sass/ie-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/ie-rtl.css 
    error assets/sass/unsemantic-grid-responsive-no-ie7-rtl.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-desktop-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-desktop-rtl.css 
identical assets/stylesheets/demo.css 
    error assets/sass/unsemantic-grid-base-no-ie7-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-responsive-tablet-no-ie7.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7.css 
    error assets/sass/unsemantic-grid-base-tablet-no-ie7-rtl.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-base-tablet-no-ie7-rtl.css 
    error assets/sass/unsemantic-grid-responsive-rtl.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-rtl.css 
    error assets/sass/unsemantic-grid-tablet-no-ie7.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-tablet-no-ie7.css 
    error assets/sass/unsemantic-grid-mobile-no-ie7.sass (Line 37 of assets/sass/partials/_unsemantic-vars.sass: Invalid CSS after "": expected selector, was "%clear")
identical assets/stylesheets/unsemantic-grid-mobile-no-ie7.css 
    error assets/sass/unsemantic-grid-responsive-no-ie7.sass (Line 14 of _shared.scss: Mixins may only be defined at the root of a document.)
identical assets/stylesheets/unsemantic-grid-responsive-no-ie7.css

This is very low priority but I've found myself needing a wrapper for grid-container that will go 100% wide to apply a background image to a "band" or section of content.

See here: http://www.fieldscriptsifs.com/Pages/default.aspx (css .section wrapping grid-containers)

Is there anything you'd suggest or that could be easily added to this framework that stays in the spirit of unsemantic to accomplish this beyond adding it in to my CSS every time?

Which css file should be used for a webpage, to be compatible to all resolutions below 1200px (Width)

why are many things twice in ie.css?
like .grid-container or such.
it seems the file just starts again at line 729

There are some cases when I need to use some element as grid parent only for mobile screens. Is there any way to extend a class to the .grid-parent using media queries?