devlint / gridlex Goto Github PK
View Code? Open in Web Editor NEWJust a CSS Flexbox Grid System
Home Page: http://gridlex.devlint.fr
License: MIT License
Just a CSS Flexbox Grid System
Home Page: http://gridlex.devlint.fr
License: MIT License
Really loving this grid so far! However I'm wondering, Is there any way to accomplish something like the following?
<div class="col-sm-10" data-push-right="off-sm-1" data-push-right="off-sm-1">Content</div>
Thanks alot!
Hello there,
I just started to work with your grid system and I have to say it's pretty awesome. Very good job to you!
Anyway I have a little request for you. It should be great to specify for each breakpoints what we want to do with our grid with data-attribute
or whatever.
For exemple:
.grid[data-xs="column wrap-reverse justifyCenter alignStretch"][data-sm="row-reverse nowrap justifyCenter"]
etc. etc.
Same for cols:
.col-[data-xs="-1 1 0 auto flex-start"]
(order / flex / align-self)
What do you guys think about that ?
Thanks!
Hi Guy's,
sorry for my english ...
So i'm trying to explain, i have 2 columns :
<div class="col-8_sm-12"></div>
<div class="col-4_sm-12 grid">
<div id="one" class="col-12_sm-6_xs-12"></div>
<div id="two" class="col-12_sm-6_xs-12"<div>
<div id="three" class="col-12_sm-6_xs-12"></div>
</div>
The problem is that my blocks "one" "two" and "three" are displayed like there was a "spaceBetween" and i don't know why . I would like block displaying like a "flex-start" but how i can do that ?
Thanks
How can I solve Clearfix issues with Gridlex? I've tried the solution below without success.
Thank you in advance.
.cf:before,
.container:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
/* IE 6/7 */
.cf {
zoom: 1;
}
You can see this on the project home page, the nested grid example there does not work. I think due to line 193 of gridlex.scss where it sets every child of grid that isn't set to "0" to display block (I think), but the nested grid wants to be display flex.
I was experimenting with your grid system (which seems to be really cool btw) and found an issue with the attributes push-left
and push-right
when used in JSX syntax. According to the React docs "if you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them". For that reason, I would like to know if it is possible to change the approach. Why not use a class? Or an attribute prefixed with data-
? Thank you!
Source: https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes
The following screenshot has the latest version on the left, with the older version on the right:
As you can see, all of the classes on the left use a starts with operator, which triggers unexpected styling on classes such as colorBand
, etc. This also causes another issue with elements that have col
as a class, but not the first class. For example, using someClass col
inside of a grid-6
won't trigger the latest rule in 2.3.1 as it does not start with col
.
Is this intended behaviour, or a regression from the previous version?
Foundation 6 does this thing where in your sass files you can go @include grid-column(6)
(for 6 columns, but any number from 1-12 is valid) and it generates the styles for you in whatever block you want.
Useful for keeping your classes clean.
Use as so:
.wrapper {
@include grid-row();
}
.main-block {
@inclide grid-column(8);
}
.sidebar {
@include grid-column(4);
}
Is there any to use gridlex as such?
Foundation way: http://foundation.zurb.com/sites/docs/grid.html
Gridlex will be perfect if it would has a class like -maxHeight
for that cases where you want a sidebar with the max height of the window no matter of the automatic size of the children elements of that div with .col
You can see this problem even on the demo page if you look at it on a smaller screen(e.g. 320px width). A scrollbar will appear and you can scroll to the right because of the negative margin for every .grid
One option maybe would be to refactor the grid gutter, so that it does not need this negative space trick, but instead uses some more complex selectors to address the first and last column (also will writing this i have to admit that might be impossible, as you never know what the last colum is ;) ) Maybe there is another option, or if everything fails just clear the negative margin for smaller screens.
Tested on FF latest, windows 10. (should be the same in every browser)
Hi there!
Is there a way to create a variation of the grid that allows me to quickly change the gutter width? For example .grid-gutterSm, .grid-gutterMd, etc...
This would be useful with the project that I'm working with at the moment as the design isn't very consistent.
Thanks!
Hi, I have forked your repo and added some changes to the SASS version.
Now the grid is generated with a for
loop and you can specify how many columns you want it to be. I can't send a pull request because there are a lot more changes, but if you are interested in the changes, the repo is here. I think I'll probably rename my fork as I am going to add breaking changes (changing the media queries from max-width
to min-width
, as I think it is more intuitive and it is mobile-first).
This works: col-0
but this does not seem to col-2_xs-0
(for any breakpoint).
The CSS that sets display: block
only checks [class*="col-"]:not([class*="grid"]):not([class*="col-0"]) {
Adding !important
to lines 192, 195 and 199 seems to fix this (although likely breaks something else)
I think you guys should mention that in the docs.
Great work on the library!
It's making my life much easier, except that I've run into a snag with conflicting CSS names, primarily with the generic "grid" class. I've got a few other libraries which unfortunately also use that name, and it's causing chaos.
Allowing Gridlex to use a class prefix variable would clear off class name re-use issues forever! i.e. gl_grid, gl_col etc...
I'm trying to get a simple layout with gutters. Here is my code:
<div class="grid">
<div class="col-6">Col</div>
<div class="col-6">Col</div>
</div>
What am I missing that would cause the cols above to be displayed with no gutters?
Thank you
There seems to be a bug where you cannot vertically center equal height columns -- see example. Is there are a way around this?
http://codepen.io/instituteofcode/pen/evWmPL
I can think of a hacky fix, but is there any way reason it would behave like this?
Cheers,
Tina
For example:
<div class="col-1_xs-12_sm-0_md-9_lg-12">...</div>
It seems this div must be displayed on xs, md and lg sizes, and be hidden on sm.
But it's not working, cause on xs-screen div inherits "display: none" by sm-size.
Is it a bug and how to fix it? Thanks.
Hello,
I couldn't manage to find a license to use this grid system.
Could you please advise what license it is?
Thanks
Appears while using the bottom scroll normalize.css. If you set the margin to the default value (8px), the scroll disappears.
ps: abolish the right margin at grid- *, scroll disappears.
I'm experiencing a bug where children of columns inside an equal height grid become columns themselves. I've written some hacky code to override it, but seems like an un-intended behaviour. Appears in both safari and chrome, so I don't think it's a browser issue.
Expectation: .grid-6 > .col-2
= 2/6 = 1/3 = 100% / 3
Reality: .grid-6 > .col-2
= 2/12 = 1/6
It seems like only one 12-columns grid supported?
I think I miss something in the @mixin makeCol($col)
mixin:
//************************
// VARIABLES
//************************
$gl-gridName: grid !default;
$gl-colName: col !default;
$gl-gutter: .8rem !default; // Total
$gl-col-bottom: $gl-gutter !default;
$gl-xs: "screen and (max-width: 35.5em)" !default; // up to 568px
$gl-xs-plus: "screen and (min-width: 35.5em)" !default; // up to 568px
$gl-sm: "screen and (max-width: 48em)" !default; // max 768px
$gl-sm-plus: "screen and (min-width: 48em)" !default; // max 768px
$gl-md: "screen and (max-width: 64em)" !default; // max 1024px
$gl-md-plus: "screen and (min-width: 64em)" !default; // max 1024px
$gl-lg: "screen and (max-width: 80em)" !default; // max 1280px
$gl-lg-plus: "screen and (min-width: 80em)" !default; // max 1280px
$glp_col-1: (100%/12);
$glp_col-2: ($glp_col-1*2);
$glp_col-3: ($glp_col-1*3);
$glp_col-4: ($glp_col-1*4);
$glp_col-5: ($glp_col-1*5);
$glp_col-6: ($glp_col-1*6);
$glp_col-7: ($glp_col-1*7);
$glp_col-8: ($glp_col-1*8);
$glp_col-9: ($glp_col-1*9);
$glp_col-10: ($glp_col-1*10);
$glp_col-11: ($glp_col-1*11);
$glp_col-12: ($glp_col-1*12);
$glp_col-13: ($glp_col-1*13);
$glp_col-14: 100%;
$glp_col-5-14: (100%/5);
$glp_col-7-14: (100%/7);
$glp_col-8-14: (100%/8);
$glp_col-9-14: (100%/9);
$glp_col-10-14: (100%/10);
$glp_col-11-14: (100%/11);
$glp_col-13-14: (100%/13);
// Function to generate the grid by number
@mixin makeGridByNumber($grid)
{
[class*="#{$grid}-1"] > .#{$gl-colName}, [class*="#{$grid}-1"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-14; max-width: $glp_col-14; }
[class*="#{$grid}-2"] > .#{$gl-colName}, [class*="#{$grid}-2"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-7; max-width: $glp_col-7; }
[class*="#{$grid}-3"] > .#{$gl-colName}, [class*="#{$grid}-3"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-3-14; max-width: $glp_col-3-14; }
[class*="#{$grid}-4"] > .#{$gl-colName}, [class*="#{$grid}-4"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-4-14; max-width: $glp_col-4-14; }
[class*="#{$grid}-5"] > .#{$gl-colName}, [class*="#{$grid}-5"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-5-14; max-width: $glp_col-5-14; }
[class*="#{$grid}-6"] > .#{$gl-colName}, [class*="#{$grid}-6"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-6-14; max-width: $glp_col-6-14; }
[class*="#{$grid}-7"] > .#{$gl-colName}, [class*="#{$grid}-7"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
[class*="#{$grid}-8"] > .#{$gl-colName}, [class*="#{$grid}-8"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-8-14; max-width: $glp_col-8-14; }
[class*="#{$grid}-9"] > .#{$gl-colName}, [class*="#{$grid}-9"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-9-14; max-width: $glp_col-9-14; }
[class*="#{$grid}-10"] > .#{$gl-colName}, [class*="#{$grid}-10"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-10-14; max-width: $glp_col-10-14; }
[class*="#{$grid}-11"] > .#{$gl-colName}, [class*="#{$grid}-11"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-11-14; max-width: $glp_col-11-14; }
[class*="#{$grid}-12"] > .#{$gl-colName}, [class*="#{$grid}-12"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-12-14; max-width: $glp_col-12-14; }
[class*="#{$grid}-13"] > .#{$gl-colName}, [class*="#{$grid}-13"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-13-14; max-width: $glp_col-13-14; }
[class*="#{$grid}-14"] > .#{$gl-colName}, [class*="#{$grid}-14"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
}
// Function to generate the grid by columns
@mixin makeCol($col)
{
[class*='#{$gl-gridName}'] {
> [class*="#{$col}-1"]{ flex-basis: $glp_col-1;max-width: $glp_col-1; }
> [class*="#{$col}-2"]{ flex-basis: $glp_col-2;max-width: $glp_col-2; }
> [class*="#{$col}-3"]{ flex-basis: $glp_col-3;max-width: $glp_col-3; }
> [class*="#{$col}-4"]{ flex-basis: $glp_col-4;max-width: $glp_col-4;}
> [class*="#{$col}-5"]{ flex-basis: $glp_col-5;max-width: $glp_col-5;}
> [class*="#{$col}-6"]{ flex-basis: $glp_col-6;max-width: $glp_col-6;}
> [class*="#{$col}-7"]{ flex-basis: $glp_col-7;max-width: $glp_col-7;}
> [class*="#{$col}-8"]{ flex-basis: $glp_col-8;max-width: $glp_col-8;}
> [class*="#{$col}-9"]{ flex-basis: $glp_col-9;max-width: $glp_col-9;}
> [class*="#{$col}-10"]{ flex-basis: $glp_col-10;max-width: $glp_col-10;}
> [class*="#{$col}-11"]{ flex-basis: $glp_col-11;max-width: $glp_col-11;}
> [class*="#{$col}-12"]{ flex-basis: $glp_col-12;max-width: $glp_col-12;}
> [class*="#{$col}-13"]{ flex-basis: $glp_col-13;max-width: $glp_col-13;}
> [class*="#{$col}-14"]{ flex-basis: $glp_col-14;max-width: $glp_col-14;}
}
}
// Function to generate the offset
@mixin makeOff($off)
{
[class*="#{$gl-gridName}"]{
> [data-push-left*="#{$off}-0"]{ margin-left: 0; }
> [data-push-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
> [data-push-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
> [data-push-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
> [data-push-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
> [data-push-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
> [data-push-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
> [data-push-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
> [data-push-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
> [data-push-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
> [data-push-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
> [data-push-left*="#{$off}-11"]{ margin-left: $glp_col-11; }
> [data-push-left*="#{$off}-12"]{ margin-left: $glp_col-12; }
> [data-push-left*="#{$off}-13"]{ margin-left: $glp_col-13; }
> [data-push-right*="#{$off}-0"]{ margin-right: 0; }
> [data-push-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
> [data-push-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
> [data-push-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
> [data-push-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
> [data-push-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
> [data-push-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
> [data-push-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
> [data-push-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
> [data-push-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
> [data-push-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
> [data-push-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
> [data-push-right*="#{$off}-12"]{ margin-right: $glp_col-12; }
> [data-push-right*="#{$off}-13"]{ margin-right: $glp_col-13; }
}
}
Hi,
The grid is fantastic and very flexible, we love it! Unfortunately, there are no breakpoints for REVERSE, FIRST or LAST. That means that if, for example, I need columns to go side-by-side on desktop, but one over the other (in REVERSE order) on mobile, I cannot do it :(
Could you please integrate thos enice xs, sm, md breakpoints for these classes as well?
Thanks!
[attr*=value] selectors for class names in this context are likely to have unintended consequences, particularly with such short class values and no namespacing. (Imagine classes such as collapse or color.)
Sticking with the approach of loose-matching selectors, the col selector looks like it could be more safely expressed as .col, [class*="col-"]
without breaking compatibility. What do you think of this?
as it is stated in your guide:
Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0)
however this does not work if grid class has "-noGutter", "-center" and perhaps any other suffix. It seems to be working only on class="grid"
can you explain why this happens and is it supposed to work this way?
Hey all, love the library but I would love a way to add more breakpoints.. I have tried to manually add it using...
// Create XLG breakpoint
$gl-xlg: 'screen and (max-width: 120em)' !default; // max 1920px
// Must load after variables
@import '~gridlex/src/gridlex';
@media #{$gl-xlg} {
@include makeGridByNumber(_xlg);
}
@media #{$gl-xlg} {
@include makeCol(_xlg);
@include makeOff(_xlg);
@include makeFirstLast(_xlg);
}
Though this works it messes up all other breakpoints. because they're declared in a particular order, the only way ive been able to get it to work is to rerun the same mixin calls but with mine on top and in order.
Am I missing something? Is this not possible?
I am having a problem adding an img
tag inside a nested grid. For some reason it creates a gap at the bottom that I can't remove.
HTML
<div class="grid-noGutter">
<div class="col-12 grid-noGutter">
<div class="col-8" data-push-left="off-2">
<img class="imgContent" src="../img/santander/participant-md.png" alt="">
</div>
</div>
</div>
CSS
.imgContent {
width: 100%;
height: auto;
image-rendering: auto;
background-color: $gray;
}
I made a test page using your cards layout. The page uses handlebars to load a template populated by json data. The html loads as expected but the the resulting grid layout shows all the cards in a single column and as one scrolls down the page, each card gets smaller and smaller until they disappear! I can't find any errors in the code I am using so far but totally confused as to why this happens with the css. Here is a link to the test page:
Demo page
Hope I am just missing something simple to get this to work.
This class interfering with all the element
[class*="col-"]:not([class*="grid"]):not([class*="col-0"]) {
display: block;
}
Hi,
I recently read this article abouts the css selectors based on regular expressions: https://github.com/CSSLint/csslint/wiki/Disallow-selectors-that-look-like-regular-expressions
It seems all the selectors [class*="..."] you use in your code cost a lot for the browser, because it needs to check all existing DomElements in the page to check if its class verify or not the regExp (even if this DomElement doesn't works at all with flexgrid).
So I'm wondering about the performances of your grid compared to another one that doesn't use your suffix management, ie instead of use a class name "grid-spaceAround-center", use a more simple "grid spaceArround center" class.
The problem for me is that your code is more readable / usable than others that's why I'm hesitant.
To improve this potential problem, i've got 3 possible solution for you.
<div flexGrid="grid-spaceAround">
<col flexGrid="col-2"></col>
</div>
The advantage of this technique is only the elements that are concerned with the flexGrid management will be impacted with the CSS RegExp tests, because others will not have the data-attribute at all.
And in term of code in your sass file, it has a very small impact, because you can create a var
$gl-attributeName: class
and inside your mixins/code replace
[class*='#{$gl-gridName}']
with
[#{$gl-attributeName}*='#{$gl-gridName}']
And with this, basically everyone will have the same usage, and advanced user can change the attribute name if they want
Second possibility it to start all your css by a static class name:
instead of [class*="#{$gl-gridName}-"] { .all nesting }
for example use this
.gridlex[class*="#{$gl-gridName}-"] {...}
With this, the browser will check the existance of the class gridlex before any Regexp test I think.
Last possibility is to declare all existing possibilities as static classes:
.grid-noGutter: {} .grid-noWrap: {} .grid-center: {} .grid-noGutter-noWrap: {} .grid-noGutter-center: {} grid-noGutter-noWrap-centerd: {}
This can be done programmatically, but generates a very big css file (and perhaps not better in term of performances due to all the existing combinations.
I've no idea how to manage a benchmark for all these solutions because it's fully linked to the rendering / painting for the browser, so I cannot test all my ideas.
Are you interested by developping one of them, that can be backward compatible with olders versions ?
I can help you if you want.
Thanks
I personally feel that a more logical scale and corresponding class designation would drop xs
in favor of xl
. Thankfully, with access to the .scss, you don't have to agree – and I should be able to change it myself.
But whenever I adjust gridlex-vars.scss
and gridlex.scss
as follows I'm not getting the desired result.
$gl-sm: "screen and (max-width: 35.5em)"; // up to 568px
$gl-md: "screen and (max-width: 48em)"; // max 768px
$gl-lg: "screen and (max-width: 64em)"; // max 1024px
$gl-xl: "screen and (max-width: 90em)"; // max 1440px
...and...
/************************
GRID BY NUMBER
*************************/
@include makeGridByNumber(grid);
@media #{$gl-xl}{
@include makeGridByNumber(_xl);
}
@media #{$gl-lg}{
@include makeGridByNumber(_lg);
}
@media #{$gl-md}{
@include makeGridByNumber(_md);
}
@media #{$gl-sm}{
@include makeGridByNumber(_sm);
}
/************************
COLS SIZES
*************************/
@include makeCol(col);
@include makeOff(off);
@media #{$gl-xl}{
@include makeCol(_xl);
@include makeOff(_xl);
}
@media #{$gl-lg}{
@include makeCol(_lg);
@include makeOff(_lg);
}
@media #{$gl-md}{
@include makeCol(_md);
@include makeOff(_md);
}
@media #{$gl-sm}{
@include makeCol(_sm);
@include makeOff(_sm);
}
For example <div class="grid-3_xl-6">
produces almost the opposite of what you'd expect – where the grid will display 6 items on a row at all breakpoints except xl
, ...and where at xl
it will then display 3 items on a row.
Strange. Am I missing something – have any ideas as to why this would be the case?
On version 2.2 the dist folder is no longer present. Any reason for that? Since there are bugs on the SASS version (#16) I would like to still be able to use the compiled files while those bugs aren't fixed. I know the CDN version is also there but I don't want to be dependent on it.
Could this change be reverted? Thanks!
Is there any changelog to what has been changed since last few versions ? I noticed at least one thing (push-* changed to data-push-*). I don't want to run around my files to find what i need to fix.
There doesn't seem to be a way to hide content for greater than 1280px / 'lg' (see below). Is there a way that I'm missing? Or should I add my local overrides?
.col
-* (1 to 12)
_xs-* (0 to 12)
_sm-* (0 to 12)
_md-* (0 to 12)
_lg-* (0 to 12)
e.g.
// Added the following locally to get it to work
$gl-xl: "screen and (min-width: 80em)" !default; // max 1280px
@media #{$gl-xl}{
@include makeGridByNumber(_xl);
}
@media #{$gl-xl}{
@include makeCol(_xl);
@include makeOff(_xl);
}
@media #{$gl-xl}{
[class*="#{$gl-gridName}"] {
> :not([class*="_xl-0"]){
display: block;
}
&:not([class*="_xl-0"]) {
display: flex;
}
>[class*="_xl-0"],
&[class*="-equalHeight"] > [class*="_xl-0"]{
display: none;
}
}
}
Hi,
Do you plan to support stylus, in addition to less and sass? It's always the left-behind one…
Thanks!
With the latest NPM version, the docs/gridlex.css file
(as well as the minified version) appears to be using the gridlex
selector, rather than the class
selector by default. As per commit 6c5b5cd I assume this is not intentional?
Thanks!
Having an issue where elements placed inside the divs with a class of col also appear in columns themselves. For example,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum dapibus felis, sed convallis turpis aliquam nec.
Displays like this with the heading and the paragraph next to each other.
I understand I could probably fix this by adding an additional div, but I would rather not add unnecessary markup if I can avoid it.
React.js restricts allowed list of attributes and it's not possible to use that. Meanwhile it's not a valid HTML. Why not just use extra CSS-classes?
What are your thoughts on adding col-0 classes? These would function as utility classes to hide columns at various breakpoints.
For example, a sidebar may look like "col-2_md-3_sm-0" to indicate that it should be hidden on mobile.
I'm happy to submit a PR if this is something others would find useful.
PS- This grid seriously rocks. Thanks!
I made a page to reference sites that use Gridlex:
http://gridlex.devlint.fr/expo.html
You have URL you would like to share? You can help me to add new sites if you want.
Thx!
hey @devlint
the existing breakpoints (which use max-width
) don't make too much sense to me.
for example, an iphone 5 has a res of 320 x 568. if a user rotates the phone to gain almost 2x the screen width, there's no additional content that can become visible. the breakpoints that exist in gridlex are actually designed for min-width
media rules.
what i had to do is override the existing breakpoints to subtract 1px from each of them to get the responsive behavior that users would expect from changing device orientations:
$gl-mq-list: (
lg: "screen and (max-width: 1279px)", // 80em - 1px
md: "screen and (max-width: 1023px)", // 64em - 1px
sm: "screen and (max-width: 767px)", // 48em - 1px
xs: "screen and (max-width: 567px)" // 35.5em - 1px
) !default;
sadly, i don't think it's possible to stick with ems without using non-intuitive awkward decimals.
I have the following HTML:
<div class="grid">
<div class="col-12">
<div class="box"></div>
</div>
<div class="col-3_sm-12">
<div class="box"></div>
</div>
<div class="col-9_sm-12">
<div class="box"></div>
</div>
<div class="col-3_sm-12">
<div class="box"></div>
</div>
<div class="col-9_sm-12">
<div class="box"></div>
</div>
<div class="col-3_sm-12">
<div class="box"></div>
</div>
<div class="col-9_sm-12">
<div class="box"></div>
</div>
<div class="col-6_xs-12 grid">
<div class="col-6_sm-12">
<div class="box"></div>
</div>
<div class="col-6_sm-12">
<div class="box"></div>
</div>
</div>
<div class="col-6_xs-12 grid">
<div class="col-6_sm-12">
<div class="box"></div>
</div>
<div class="col-6_sm-12">
<div class="box"></div>
</div>
</div>
<div class="col-6_xs-12 grid">
<div class="col-6_sm-12">
<div class="box"></div>
</div>
<div class="col-6_sm-12">
<div class="box"></div>
</div>
</div>
<div class="col-6_xs-12 grid">
<div class="col-6_sm-12">
<div class="box"></div>
</div>
<div class="col-6_sm-12">
<div class="box"></div>
</div>
</div>
<div class="col-3_sm-12">
<div class="box"></div>
</div>
<div class="col-9_sm-12">
<div class="box"></div>
</div>
<div class="col-12">
<div class="box"></div>
</div>
</div>
When I load your css via cdnjs I get the result I want:
When I include your SASS files into my SASS files I get the following result:
Working example: https://jsfiddle.net/dg4k84zj/.
Would it be possible to fix that? I would prefer to import the sass files instead of using the generated CSS, since I want to be able to access your SASS variables... Thank you!
If you were to have a grid as follows:
<div class="grid-equalHeight">
<div class="col></div>
<div class="col-2_sm-0_md-0"></div>
</div>
The resulting cascade is: https://cl.ly/3g2m093r1p2l
As you can see, the application of equalHeight is overriding the display: none
.
It's a great framework, I'm thinking in using it, however, is there a way to set up the media queries to work with a "mobile first" mindset?
This is kind of the mindset I'm talking about: css-media-queries-best-practices
I tried to just change media queries to min-width values, but the way the classes are set up makes the layout to not work as it should be ( stacking up columns in smaller devices - more space for content );
Hopefully I'm making sense; min-width is better for general performance as mobile devices doesn't have the graphic "power" of larger devices, that is basically the idea.
Thanks a lot!
I'm liking your grid system quite a bit, but would love to see an option to not have to put extra classes into the DOM if possible. Sort of the same thing that Bootstrap does currently with makeContainer(), makeRow(), etc. This particularly becomes useful as you can't use @extend's in Media Queries nor can you do stuff like this:
.header {
background-color: #fff;
&__inner {
@extend .grid;
@extend .container;
}
&__logo {
@extend .col;
}
&__nav {
@extend .col;
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.