Comments (11)
It's bad way to mix 2 different css-entities in that manner (size of column and visibility).
With current implementation it seems not possible to turn back visibility of column, because on xs-size all previous breakpoints have been applied their styles. With changing column size col-(1-12)
it works cause it simply overrides flex-basis
, but (xs|sm|md|lg)-0
uses display:none
to hide the column.
Solution: make api to show/hide columns with separated modifiers xs-visible md-hidden
and override with media-query same css-property (display).
from gridlex.
fine, thank you!
from gridlex.
There's definitely a cleaner sass/scss way of writing this, but this works:
[class*="#{$gl-colName}-"][class*="-1"], [class*="#{$gl-colName}-"][class*="-2"], [class*="#{$gl-colName}-"][class*="-3"], [class*="#{$gl-colName}-"][class*="-4"], [class*="#{$gl-colName}-"][class*="-5"], [class*="#{$gl-colName}-"][class*="-6"], [class*="#{$gl-colName}-"][class*="-7"], [class*="#{$gl-colName}-"][class*="-8"], [class*="#{$gl-colName}-"][class*="-9"], [class*="#{$gl-colName}-"][class*="-10"], [class*="#{$gl-colName}-"][class*="-11"], [class*="#{$gl-colName}-"][class*="-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="-0"]{
display: none;
}
@media #{$gl-xl}{
[class*="#{$gl-colName}-"][class*="_xl-1"], [class*="#{$gl-colName}-"][class*="_xl-2"], [class*="#{$gl-colName}-"][class*="_xl-3"], [class*="#{$gl-colName}-"][class*="_xl-4"], [class*="#{$gl-colName}-"][class*="_xl-5"], [class*="#{$gl-colName}-"][class*="_xl-6"], [class*="#{$gl-colName}-"][class*="_xl-7"], [class*="#{$gl-colName}-"][class*="_xl-8"], [class*="#{$gl-colName}-"][class*="_xl-9"], [class*="#{$gl-colName}-"][class*="_xl-10"], [class*="#{$gl-colName}-"][class*="_xl-11"], [class*="#{$gl-colName}-"][class*="_xl-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_xl-0"]{
display: none;
}
}
@media #{$gl-lg}{
[class*="#{$gl-colName}-"][class*="_lg-1"], [class*="#{$gl-colName}-"][class*="_lg-2"], [class*="#{$gl-colName}-"][class*="_lg-3"], [class*="#{$gl-colName}-"][class*="_lg-4"], [class*="#{$gl-colName}-"][class*="_lg-5"], [class*="#{$gl-colName}-"][class*="_lg-6"], [class*="#{$gl-colName}-"][class*="_lg-7"], [class*="#{$gl-colName}-"][class*="_lg-8"], [class*="#{$gl-colName}-"][class*="_lg-9"], [class*="#{$gl-colName}-"][class*="_lg-10"], [class*="#{$gl-colName}-"][class*="_lg-11"], [class*="#{$gl-colName}-"][class*="_lg-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_lg-0"]{
display: none;
}
}
@media #{$gl-md}{
[class*="#{$gl-colName}-"][class*="_md-1"], [class*="#{$gl-colName}-"][class*="_md-2"], [class*="#{$gl-colName}-"][class*="_md-3"], [class*="#{$gl-colName}-"][class*="_md-4"], [class*="#{$gl-colName}-"][class*="_md-5"], [class*="#{$gl-colName}-"][class*="_md-6"], [class*="#{$gl-colName}-"][class*="_md-7"], [class*="#{$gl-colName}-"][class*="_md-8"], [class*="#{$gl-colName}-"][class*="_md-9"], [class*="#{$gl-colName}-"][class*="_md-10"], [class*="#{$gl-colName}-"][class*="_md-11"], [class*="#{$gl-colName}-"][class*="_md-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_md-0"]{
display: none;
}
}
@media #{$gl-sm}{
[class*="#{$gl-colName}-"][class*="_sm-1"], [class*="#{$gl-colName}-"][class*="_sm-2"], [class*="#{$gl-colName}-"][class*="_sm-3"], [class*="#{$gl-colName}-"][class*="_sm-4"], [class*="#{$gl-colName}-"][class*="_sm-5"], [class*="#{$gl-colName}-"][class*="_sm-6"], [class*="#{$gl-colName}-"][class*="_sm-7"], [class*="#{$gl-colName}-"][class*="_sm-8"], [class*="#{$gl-colName}-"][class*="_sm-9"], [class*="#{$gl-colName}-"][class*="_sm-10"], [class*="#{$gl-colName}-"][class*="_sm-11"], [class*="#{$gl-colName}-"][class*="_sm-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_sm-0"]{
display: none;
}
}
@media #{$gl-xs}{
[class*="#{$gl-colName}-"][class*="_xs-1"], [class*="#{$gl-colName}-"][class*="_xs-2"], [class*="#{$gl-colName}-"][class*="_xs-3"], [class*="#{$gl-colName}-"][class*="_xs-4"], [class*="#{$gl-colName}-"][class*="_xs-5"], [class*="#{$gl-colName}-"][class*="_xs-6"], [class*="#{$gl-colName}-"][class*="_xs-7"], [class*="#{$gl-colName}-"][class*="_xs-8"], [class*="#{$gl-colName}-"][class*="_xs-9"], [class*="#{$gl-colName}-"][class*="_xs-10"], [class*="#{$gl-colName}-"][class*="_xs-11"], [class*="#{$gl-colName}-"][class*="_xs-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_xs-0"]{
display: none;
}
}
from gridlex.
Here's the complete scss and css. A note though, if you use this gist, notice I changed the media queries to be mobile first like most other grid frameworks and dropped .equalHeight
because I've found it has too many issues currently. I also changed the units to px because the current way can get thrown off if the font size changes.
from gridlex.
Probably this should make it cleaner :D
@media #{$gl-xl}{
[class*="#{$gl-colName}-"]:not([class*="_xl-0"]) {
display: block;
}
[class*="#{$gl-colName}-"][class*="_xl-0"]{
display: none;
}
}
And so on..
But still bugs possible.. if the block which was hidden becomes visible could break layout cause it might have had not display: block
, but display: flex
for example (inner grid?).
from gridlex.
@ixrock Could you give an example of where it could break?
If I'm understanding what you're saying couldn't we just add in the grid as well?
@media #{$gl-xl}{
[class*="#{$gl-colName}-"]:not([class*="_xl-0"]) {
display: block;
}
[class*="grid"][class*="#{$gl-colName}-"]:not([class*="_xl-0"]) {
display: flex;
}
[class*="#{$gl-colName}-"][class*="_xl-0"]{
display: none;
}
}
from gridlex.
@bryanwillis yeah, probably it should work!
from gridlex.
Here it is compiled into css with the current Gridlex variables applied. I haven't tested, but I think I got it right:
[class*="col-"]:not([class*="col-0"]) {
display: block;
}
[class*="grid-"][class*="col-"]:not([class*="col-0"]) {
display: flex;
}
[class*="col-"][class*="col-0"] {
display: none;
}
@media screen and (max-width: 80em) {
[class*="col-"]:not([class*="_lg-0"]) {
display: block;
}
[class*="grid-"][class*="col-"]:not([class*="_lg-0"]) {
display: flex;
}
[class*="col-"][class*="_lg-0"] {
display: none;
}
}
@media screen and (max-width: 64em) {
[class*="col-"]:not([class*="_md-0"]) {
display: block;
}
[class*="grid-"][class*="col-"]:not([class*="_md-0"]) {
display: flex;
}
[class*="col-"][class*="_md-0"] {
display: none;
}
}
@media screen and (max-width: 48em) {
[class*="col-"]:not([class*="_sm-0"]) {
display: block;
}
[class*="grid-"][class*="col-"]:not([class*="_sm-0"]) {
display: flex;
}
[class*="col-"][class*="_sm-0"] {
display: none;
}
}
@media screen and (max-width: 35.5em) {
[class*="col-"]:not([class*="_xs-0"]) {
display: block;
}
[class*="grid-"][class*="col-"]:not([class*="_xs-0"]) {
display: flex;
}
[class*="col-"][class*="_xs-0"] {
display: none;
}
}
from gridlex.
Scss
$breakpoints : (
lg: 80em,
md: 64em,
sm: 48em,
xs: 35.5em
) !default;
[class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
display: block;
}
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
display: flex;
}
[class*="#{$gl-colName}-0"] {
display: none;
}
@mixin responsiveHide($breakpoints) {
@each $breakpoint-name, $breakpoint-value in $breakpoints {
@media screen and (max-width: $breakpoint-value) {
[class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
display: block;
}
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
display: flex;
}
[class*="#{$gl-colName}-"][class*="_#{$breakpoint-name}-0"]{
display: none;
}
}
}
}
@include responsiveHide($breakpoints);
from gridlex.
Hello and thanks to you all for the discussion about the issue :)
@bryanwillis Thanx for the code which I am inspired! I change a little the code like this in the next release:
/************************
HIDING COLS
*************************/
[class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
display: block;
}
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
display: flex;
}
[class*="#{$gl-colName}-"][class*="#{$gl-colName}-0"] {
display: none;
}
@media #{$gl-lg}{
[class*="#{$gl-gridName}"] {
> :not([class*="_lg-0"]){
display: block;
}
&:not([class*="_lg-0"]) {
display: flex;
}
>[class*="_lg-0"],
&[class*="-equalHeight"] > [class*="_lg-0"]{
display: none;
}
}
}
@media #{$gl-md}{
[class*="#{$gl-gridName}"] {
> :not([class*="_md-0"]){
display: block;
}
&:not([class*="_md-0"]) {
display: flex;
}
>[class*="_md-0"],
&[class*="-equalHeight"] > [class*="_md-0"]{
display: none;
}
}
}
@media #{$gl-sm}{
[class*="#{$gl-gridName}"] {
> :not([class*="_sm-0"]){
display: block;
}
&:not([class*="_sm-0"]) {
display: flex;
}
>[class*="_sm-0"],
&[class*="-equalHeight"] > [class*="_sm-0"]{
display: none;
}
}
}
@media #{$gl-xs}{
[class*="#{$gl-gridName}"] {
> :not([class*="_xs-0"]){
display: block;
}
&:not([class*="_xs-0"]) {
display: flex;
}
>[class*="_xs-0"],
&[class*="-equalHeight"] > [class*="_xs-0"]{
display: none;
}
}
}
from gridlex.
Version 2.2.3 is published.
If it's ok for you, I let you close the issue?
Thx.
from gridlex.
Related Issues (20)
- Suggestion - alternate version that doesn't use the word 'grid' HOT 2
- Hiding columns HOT 4
- .grid-column-center does not center horizontally HOT 1
- Grid-*_sm-* compressing page
- How to support a number of columns other than 12 HOT 1
- 404 error by open via cdnjs. HOT 1
- Question: Is there a way to do different gutters at breakpoints?
- Changing to min-width (mobile first) inverts the *-hidden functionality
- Customize CSS class name HOT 2
- Add option to preserve outside gutter
- Add RTL Feature HOT 1
- col-first / col-last question
- Not working in Opera mini HOT 1
- Different gutters for each breakpoint
- -equalHeight does not work properly HOT 3
- Is this project still being maintained? HOT 7
- collision class names to an element that starts with modified grid name 'row' HOT 2
- class
- Columns overlapping on small screenwidth
- in.listformat javascript not get the point
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridlex.