imevro / flexboxgrid2 Goto Github PK
View Code? Open in Web Editor NEWThis project forked from kristoferjoseph/flexboxgrid
Modern 12 column grid system based on flex property
Home Page: https://imevro.github.io/flexboxgrid2/
License: Other
This project forked from kristoferjoseph/flexboxgrid
Modern 12 column grid system based on flex property
Home Page: https://imevro.github.io/flexboxgrid2/
License: Other
Is is possible to get a .col- class that doesn't grow (flex-grow: 0) but inherits the other styles e.g flex-basis and max-width.
This enables us to have a .col- that doesn't grow past it's content when used in conjunction with the normal .col-.
the horizontal scrolling issue originaly reported here kristoferjoseph#144 still appears if you dont use container or container-fluid around your row and cols. maybe write down this spec in the docs so everyone uses the grid in the correct way?
followed by a link from kristoferjoseph#292
I think it is good to have some explanation about .box, .box-row, .container, .container-fluid in the doco
Looking at the src folder, the flexboxgrid2.css
file looks like it requires postcss to output a css file that is suitable for use in live production.
Am I just missing it? Apologies if so.
If not, I would suggest adding a dist folder to the repo, with a normal and minified CSS file inside. Please and thanks.
Before I start, thumbs up for forking and maintaining this. Sadly, the first thing you find on google when searching for "flex css framework" is a dead open source project with no link to this repo (for whatever reason - no judgement involved :) ).
Now back to topic: Bootstrap has a .container and .container-fluid class to support things like a centered, responsive, layout with breakpoints for width
and stuff like that.
I've wondered why this isn't a thing for flexboxgrid2, as well. Is there a reason for it or is it just not yet implemented?
still facing the horizontal scroll issue orignaly reported here: kristoferjoseph#144
using container-fluid around my row but removed the 16px padding to have a full width layout. without removing the padding of container-fluid, there is no horizontal scroll.
my code:
<div class="container-fluid">
<div class="row middle-sm">
<div class="col-xs-12 col-sm-7">
<div class="box spaced-default">
<h2>Fühl dich wie Zuhause</h2>
<p class="center">Dein Damen und Herren Coiffure in Wettingen. Geniesse das entspannte und lockere Ambiente bei einem Espresso und freue dich auf einen frischen und modischen Haarschnitt. Gianni arbeitet mit zusammen Trinity Haircare sowie Haarsana und gibt regelmässig Workshops in der Schweiz und im Ausland. Deine Haare - bei uns in guten Händen.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div class="box">
<img class="teaser" src="/assets/images/home_salon.jpg">
<a class="btn btn-text btn-absolute" href="/produkte">
<span class="center">Salon</span>
</a>
</div>
</div>
</div><!-- close container fluid -->
It would be super nice if there were a quick way to customize the grid's gutters, etc. without needing to clone/fork and rebuild the library. It looks like you're using native CSS variables in a preprocessed fashion, which is great, but none of the variables can be overridden after including flexboxgrid2
normally in projects.
When i trying to use the old version of flexboxgrid1 why theres a vertical scrolling effect and when i resize the browser theres a horizontal and vertical effect? but when i delete the negative margin on the row it fix magically , Is it right to delete the negative margin ?
...
...
...
Since flexboxgrid is used heavily used for responsiveness, I believe visibility classes should be a part of core library.
There's a PR at kristoferjoseph#211 maybe can merge on this repo?
Hi, I believe using [class=^col-]
will lead to some problems:
col-
is not at the start of a class name, like class=" col-md-6"
or class="first-xs col-md-6"
, then it will mismatch the selector.css-loader
, [class=^col-]
won't be exported, because css-loader
's CSS Module only works with class name selector. A typical user is react-flexbox-grid. I just posted a related issue there.I'm thinking that maybe we could keep [class=^col-]
and add all the explicit class names back?
Thank you!
Excellent framework. Nice job.
It would be nice if SASS source files were available. I mention it because I'd like to wrap the whole thing in a wrapper class. Ex:
<div class="flexgrid2-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
</div>
The reason is because I often like to link to small grid libraries when I work on existing sites that have lousy themes/no grids. It makes adding custom content quick and easy (especially with Magento sites - they almost always have no grid framework and a terrible - but I use it frequently with WordPress sites, too). However, I like to wrap it in a unique class so not to (potentially) collide with other classes similarly named (like .row
, .container
, etc - they are rather common names). I currently do this with bootstrap-grid-css, however, I am sick of maintaining it and I like your framework better.
Also, is there a reason that child elements like .row
and .col-*
aren't nested under the .container
classes? Just curious.
Anyway, just throwing out some ideas. Keep up the good work.
Daniel
Request to change the functionality of the first-*
and last-*
modifiers to be more applicable.
...
Reading the documentation, I would expect that using the first-*
or last-*
modifiers would actually rearrange the columns based on the viewport. So an element with first-xs
would only be arranged first if the viewport matched the xs
media query
...
It appears that using first-*
or last-*
will always place those columns in that order, regardless of screen size. This isn't very useful to someone building more advanced responsive layouts.
...
Can you add visible-* classes like:
.visible-xs
display none !important
@media (max-width 48em)
display flex !important
Is it possible to add helper classes to allow the .container-fluid to be more powerful. Currently, .container-fluid isn't display flex and the .row class is less than ideal in some situations due to the negative margins causing overflow.
Ideally, .flex (direction: row, flex: 0 0 0, width 100%) and .flex-column (direction: column, flex: 0 0 0, width 100%) modifier classes would allow the use of existing classes to capture most layout needs.
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.