erwstout / ginger Goto Github PK
View Code? Open in Web Editor NEWA minimal flexbox grid system named after a cute dog.
Home Page: https://gingergrid.firebaseapp.com/
License: MIT License
A minimal flexbox grid system named after a cute dog.
Home Page: https://gingergrid.firebaseapp.com/
License: MIT License
scss mixin options would be great for those who want to have more semantic HTML.
Should have an option for a max-width
on containers.
Currently display classes are:
.sm-only{}
.md-only{}
.desktop-only{}
Changing desktop-only
to lg-only
will better follow the other naming conventions.
Currently nested rows get indented. This is due to the padding that is set on the columns. Easy way to fix this is just to have any nested row have a negative margin that is equal to whatever the column padding is.
Columns currently have no position declared, which can cause small issues if an element inside a column is position: absolute;
y u no put docu?!
Might be helpful to have a .hide
class to just hide something all together across all viewports.
Column Padding is not being compiled in ginger.scss
// Full Width Row
.row{
&--full-width{
width: 100%;
}
}
Block grid styles are applied with a css wildcard ([class*=block-grid-]
) which can cause some conflicts in styles if you use a class name containing block-grid
as a parent such as flexible--block-grid-lists
[class*=block-grid-]
needs a width of 100%.
Would be nice to be able to easily change block-grid counts on small breakpoints.
<div class="sm-block-grid-1 block-grid-4">...</div>
using the class flex-basis-#
to make set flex-basis
columns works, however there needs to be more classes applied to make it truly flex.
The release branch release/2.0
is pretty much set but needs testing to verify it is ready for release. Still waiting on mixin options.
.row--wrap
should read .row--no-wrap
Need to implement quick and easy classes to make column offsets.
Point to gingergrid.com instead.
Allow for easy to use block grid options that allow for grid items similar to foundation block grids. Normally would use:
<ul class="row">
<li class="col-4">
...
</li>
<li class="col-4">
...
</li>
</ul>
But would be rad to have it based on how many items in the grid instead.
This should only apply for Factor1 projects but may be useful beyond. In particular, these older projects that are already using Foundation or Kube or whatever. These typically already have a container
and row
class assigned, so adding in Ginger doesn't always work out of the box. The same is true for some resets that use
*:before,
*:after {
...code...
}
or even
*:before,
*:after {
content: ' ';
display: table;
}
as Ginger has now inherited those styles and may lead to problems.
Maybe add default styles to counter this behavior, or consider namespacing the classes.
settings.scss
needs to have actual overrides not just the variable names.
Change to 43em
to cover most smart phones in landscape mode.
Add the ability to define a flex-basis
The .row
options are missing a justify-content: flex-start
option.
By default columns have a flex property of flex: 0 1 $flex-basis;
In some cases when the columns wrap it may be nice for those to grow. Adding a .col-grow
or something similar could possibly be a nice feature. Would possibly have to be added to as a row
option.
In current project my override looks like this:
.row{
max-width: 100%;
flex-wrap: wrap;
.col-4{
background: white;
flex: 1 1 33.333%;
padding: 15px 6px;
&:nth-child(1), &:nth-child(4){
padding-left: 12px;
}
&:nth-child(3), &:nth-child(5){
padding-right: 12px;
}
&:nth-child(4), &:nth-child(5){
padding-top: 0;
}
}
Should be similar to row override classes to have more control over columns.
Firefox doesn't listen to flex-basis values, for instance if flex-basis: 50%
and contains a large image, etc.. it expands. Adding overflow:hidden fixes the issue.
In some cases it might be nice to collapse the padding on a column. .no-pad
perhaps?
Missing from docs.
.desktop-only--flex
doesn't appear to be working correctly.
// Small Breakpoint Size
// ( Use an em or rem value only for offsets to work correctly)
$small-breakpoint: 47.9375em !default;
Would be nice to have a sm-text-left
class available to override desktop styles in some cases.
.md-col-6
for breakpoints after small up to 1024px
Would be nice to have go to classes for visibility, such as hide-mobile
or show-mobile
Adding col-centered
options for sm-col-centered
and md-col-centered
would be beneficial.
Would be nice to have a reverse option to flip the order of items in a row.
Would be nice to have column ordering to easily swap column orders. With breakpoint support as well (small, medium, standard)
// Sample of how it could work
.col-order-first{
order: -1;
}
.col-order-2{
order: 2;
}
Small columns, or any element with classes that doesn't start with col-
fail to get the default padding property from the ginger settings file.
*[class^="col-"]
Should be changed to:
*[class*=" col-"], *[class*=" sm-col-"]
Nested rows are inheriting the width: 100%
from their parent .row
, which causes an unexpected offset. Adding width: auto
to the nested row (.row .row
) resolves this.
May be a good idea to update the documentation to reflect the desktop down nature of the grid, and to make that a bit more clear.
To recap what I was showing you earlier, I wanted a column to be 12 columns up until the large breakpoint, and then 6 columns. I was not aware of the nature of the grid, and that I needed think of the grid as being 6 columns until it was down to medium (and then small), and then it would be 12 columns.
Since the medium breakpoint inherits the desktop column styles instead of the mobile column styles, this can be a point of confusion that could need clarification.
.row
should have a flex property of flex: 0 1 auto;
fixed in 1.1.4
Needs to be added to _row.scss
Ginger has the following issue as pointed out by Phillip Walton
An explicit flex-basis value (i.e., any value other than auto) is supposed to act just like width or height. It determines the initial size of a flex item and then the other flexibility properties allow it to grow or shrink accordingly.
IE 10-11 always assume a content box model when using flex-basis to determine a flex item's size, even if that item is set to box-sizing:border-box. Demo 7.1.a shows that an item with a flex-basis value of 100% will overflow its container by the amount of its border plus its padding.
The fix should look something like this:
.col-4{
width: 33.33%;
flex-basis: auto;
}
In some cases using desktop-only
(which adds display: block
) can break layouts that may be flex items. It would be nice to have a class such as desktop-only--flex
to display the element as a flex element instead.
.desktop-only{
display: block !important;
&--flex{
display: flex !important;
}
}
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.