2

I am trying to toggle the mobile view for foundation framework.

I found the relevant section of css in the foundation.css file...

@media only screen and (max-width: 767px) {
  body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  .column, .columns { width: auto !important; float: none; }

... more code here ...

  .push-three-mobile { left: 75%; }
  .pull-three-mobile { right: 75%; }
}

And I copied the contents out, prefixing every selector (including the ones after comma - as in not at the start of the line) with a new class (I called slim).

.slim body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.slim .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.slim .column, .slim .columns { width: auto !important; float: none; }

... more code here ...

.slim .push-three-mobile { left: 75%; }
.slim .pull-three-mobile { right: 75%; }

I can now toggle the mobile view by adding or removing the slim class to the html tag. This is exactly what I want to do - and I like that it works with css (set server side) or javascript (so can be toggled client side by any trigger).

However, I hate that I have had to duplicate everything. Is there a way I can make this work without duplication?

Is it possible to alter @media selectors with javascript for example, or to make the @media container or .slim container apply contained styles?

Is there a better way?

j0k
  • 22,600
  • 28
  • 79
  • 90
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • 1
    Good question. I haven't seen native css ways to do this. You don't like the duplication cos of code size or Ctrl+C Ctrl+V work? Css pre-processor (e.g. [lesscss.org](http://lesscss.org)) could help with second issue. The code would look like `@media only screen and (max-width: 767px), .slim { body { ... more code here ... }}` – Michael Malinovskij Dec 06 '12 at 12:19
  • I don't like duplication because of both bigger file-size (although hardly a difference if gzipped), but mostly because it becomes something to manage. If I had a solution which altered one or two lines of code, there is a good chance I could make a patch that I could apply every time I update foundation. If I have to copy and paste a whole block - it probably means editing by hand each time I update foundation, as they most likely change parts of that section all the time. Thanks for the LESSCSS suggestion. – Billy Moon Dec 06 '12 at 12:45
  • I will think about it. I did have a go at using the build script for foundation, but find it unnecessarily complex for my needs, so would like to avoid it. It would allow me to add that one liner you put in the comment, as a one stop solution. Thanks. – Billy Moon Dec 06 '12 at 12:46

1 Answers1

0

Looking at the scss that is provided with Foundation you could use the grid-column mixin as part of your compiled css.

Below is a snippit from the _grid.scss, however instead of including the @include in a media query you would just wrap it with your .slim class. 

// For creating columns - @include these inside a media query to control small vs. large grid layouts
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true)

Link to Grid.scss on github

zmanc
  • 5,201
  • 12
  • 45
  • 90