Profile

Cover photo
Rian Hall
Works at BlueAspen Photography
Lives in Denver, Colorado
2,221 followers|18,620 views
AboutPostsPhotosVideos

Stream

Rian Hall

How do I?  - 
 
K. I've been having some issues with the responsiveness of Gumby, but I really like the simplicity of Gumby so far. However, one issue I am really struggling with is how do I force Gumby to change the column layout based on the viewport width?

I have a VERY basic test page that has a two columns. I want to test the ability for me to control how the columns are displayed based on the viewport width. 

Here is my basic html5 page:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Test</title>
    <!-- Gumby -->
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" href="css/gumby.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <section>
            <article>
                <div class="promo">
                    <h1>left</h1>
                </div>
            </article>
            <article>
                <div class="promo">
                    <h1>right</h1>
                </div>
            </article>
        </section>
    </div>  
  </body>
</html>

=====================

Here is the scss I have:
// Your custom SCSS should be written here...
section {
 @include row();
  border:1px solid red;
}

article {
@include column(6);
}

================

How do I change the scss so the article tag is still set to col(6) for phones and col(12) for a tablet? I know this makes no real sense, but I am trying to test the ability to override Gumby's default behavior. I tried this but it throws an error when I compile the scss:

@include respond(all-phones) {
    article {
       @include column(6);
    }
}
2
Aaron Jackson's profile photoRian Hall's profile photoDavid Alberts's profile photo
5 comments
 
You are most likely getting an error saying:

@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.

There isn't much you can do, as it's a Sass/Scss thing. I'm not sure there is a framework that does semantic grid without a grip of classes, as far as I know.

That being said, if you want to keep the semantic markup and do the setup you describe, your best bet would probably be to see what exactly Gumby is doing to make the grid in terms of container width percentages and margins in the CSS, and row percentages and first-child 0px margins. Then taking that info, apply your respond mixin with that CSS contained within. I once had a use case where I needed to maintain the row/column setup on landscape phone where I used this idea.

So here you go:
https://gist.github.com/PunchRockgroin/23f174eaf2ad8446995f

This should achieve the effect you are describing (I've added colors to better show the breakpoints)  - two six column articles in red, then two 12 columns in blue at tablet, then at 767px goes to two 6 columns. It should be noted though that anything more than twelve columns in a row usually drops things so you have to modify the margins.

It's not exactly as easy as changing a number or two in the scss but hey that's why we're paid the big bucks right?
Add a comment...

Rian Hall

Shared publicly  - 
3
Annette Junge Daugaard's profile photoAngelika Marianne Sarkiler's profile photo
2 comments
 
27. August 2014 "Happy Birthday" ...and all your wishes will come true!  http://youtu.be/ZSJT5o12Vzg  
Add a comment...

Rian Hall

Shared publicly  - 
5
Add a comment...

Rian Hall

Shared publicly  - 
3
Marco Minozzi Art - Studio's profile photo
 
fantastica serie di scatti!
 ·  Translate
Add a comment...

Rian Hall

Shared publicly  - 
3
Add a comment...
Have him in circles
2,221 people
Christophe Henrard's profile photo
Neil Dallimore's profile photo
ryota yoshimura's profile photo
Steve Vogl's profile photo
julian flores's profile photo
Samantha OBrien's profile photo
tomeraya sihombing's profile photo
Alex Maksimkin's profile photo
marza rik's profile photo

Rian Hall

How do I?  - 
 
Is there a way to use custom media queries to change number of columns? I tried using this sass code and it throws an error:

article {
@include respond("max-width: 500px") {
@include column(6);
background-color: chartreuse;
border:1px solid blue;
}
}

It's imperative I be allowed to use custom media queries to determine my page layout instead of the default device mixins.  It this possible in Gumby?
1
Adam Chambers's profile photoRian Hall's profile photo
7 comments
 
Any additional suggestions? right now I'm at a loss :-(
Add a comment...

Rian Hall

Shared publicly  - 
11
Annette Junge Daugaard's profile photo
 
~❤❤❤~
Add a comment...

Rian Hall

Shared publicly  - 
6
Add a comment...

Rian Hall

Shared publicly  - 
2
Tex Mitchell's profile photo
 
kinda creepy
Add a comment...
People
Have him in circles
2,221 people
Christophe Henrard's profile photo
Neil Dallimore's profile photo
ryota yoshimura's profile photo
Steve Vogl's profile photo
julian flores's profile photo
Samantha OBrien's profile photo
tomeraya sihombing's profile photo
Alex Maksimkin's profile photo
marza rik's profile photo
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Denver, Colorado
Work
Occupation
Photographer
Employment
  • BlueAspen Photography
    Photographer, present
Basic Information
Gender
Male