Create LESS version about flexboxgrid HOT 27 CLOSED

+1

from flexboxgrid.

Looks like there's some progress #28

from flexboxgrid.

+1

from flexboxgrid.

+2

from flexboxgrid.

@kristoferjoseph any news on that?

from flexboxgrid.

I wish I could use only mixins to do flexbox

from flexboxgrid.

@luisrudge Here is the PR I am working on for the SASS ( SCSS ) version: #55

I will be doing the exact same thing in LESS once that is all working. Feel free to make a LESS branch and convert those mixins if you like. :)

from flexboxgrid.

I'd be interested in a stylus version! That poor issue got closed due to lack of interest?! :(

from flexboxgrid.

+1

from flexboxgrid.

+1 any updates on this thread? was hoping to better integrate this with bootstrap less.

from flexboxgrid.

@ericmcgregor the SCSS version got stalled due to seeing how people were trying to use it. Can you help me understand what your expectations are? Are you wanting to use mixins in your own build?

from flexboxgrid.

I think the goal @kristoferjoseph could be to have 4 files. Offer up thoughts on my explanation. Here is how I would structure the dist less files.

flexboxgrid
├── flexboxgrid.less
├── variables.less
├── mixins
|   ├── flexgrid.less
|   └── flexgrid-framework.less

• flexboxgrid.less - Semantically scaffolds out the grid. This would be your main file that is imported into a project build.
• variable.less - Houses all configurable values.
• flexgrid.less - Generates grid columns
• flexgrid-framework.less - Your mixin to generate the correct number of grid classes given in variables.less.

I foresee two use cases. The first would be to consume this package on its own as a grid framework for a project where I am writing all LESS files from scratch. I would include the flexboxgrid.less in my build. I could customize variables.less to generate a grid with the number of columns I need. This maintains the separation of your style, logic and structure which is a primary benefit to LESS and preprocessors as a whole.

The second use case would be the consumption of flexboxgrid into Bootstrap. Foundation already has flexbox support in the works so Bootstrap users would be the more likely group to cater to. I would see flexboxgrid.less being added as an include to a bootstrap.less file as a replacement for grid.less and its mixins.

from flexboxgrid.

@joshuapekera Thanks for this breakdown. I will use this as an initial strawman and build it out so others can try it out and give feedback. Very appreciated.

from flexboxgrid.

@joshuapekera +1! yes! i wasn't able to articulate it that well. the experience i was looking for was to be able to make one simple @import flexgrid-bootstrap.less into my application less file and have it seamlessly take over the bootstrap grid. @kristoferjoseph i like the way you've structured the markup, classes and all, so it should also work as a standalone... but i think joshua is right that the audience for this is the bootstrap crowd. it's a perfect fit.

from flexboxgrid.

@ericmcgregor OK. That makes sense. Will work on this over the weekend and make a PR for you all to play with... unless someone beats me to it that is ;)

from flexboxgrid.

@joshuapekera @ericmcgregor I am wondering why you feel you need multiple files to achieve this output. Wouldn't it be easier to just have one source file? You could always override the variables by adding your own file at build time no?
Reason I ask is I showed this to a few designers and they were confused as to what they actually needed for their project. More files means more confusion.

from flexboxgrid.

@kristoferjoseph @ericmcgregor I purposed the separate files so developers can easily consume the main file and pass their own variables to generate their own scaffolding. My structure follows the same convention as Bootstrap's grid.less. It would be much easier for developers using Bootstrap to change out the @include ref for Bootstrap's grid files for their flexboxgrid counterparts. Also if this is used standalone it is reasonable to assume that the variables and mixin files will be customized for a project with additional variables and mixins that are unrelated to the flexboxgrid. You would be giving them a starting point to build their project structure and theme on top of flexboxgrid. The goal isn't to make this confusing with additional files, but to make it less confusing by maintaining best practices for code structure and separation.

from flexboxgrid.

OK.

from flexboxgrid.

+1 this would be awesome

from flexboxgrid.

+1

from flexboxgrid.

Did someone already start on that? Glad to help out on it or get things started.

from flexboxgrid.

@kristoferjoseph @joshuapekera The benefit of separating the files into areas of concern is mostly for developers who want to use the mixins to create their own grids, or extend flexboxgrid. You can hide the complexity by just having a single index.less or main.less file in the root of the less folder.

If everything was in one file, either you would not have a "import it and forget it" file and would be forced to call a createFlexboxgrids function/mixin, or you would be forced to include a bunch of generated classes that you will throw away or do not want. By separating it, you can do both.

flexboxgrid
├──less
|   ├──index.less
|   └──config
|       ├── config.less
|   └──mixins
|       ├── flexgrid.less
|       └── flexgrid-framework.less

from flexboxgrid.

+1 for mixins (also for sass version)

At least, I'd really appreciate it if the plugin would be available as a customizable mixin-version with no css written per se.

from flexboxgrid.

I think we should try to keep sass and less pretty close for easier
maintenance. Did someone already start on the sass version?

from flexboxgrid.

@mileandra
Yes, you can track the progress here: sass branch

from flexboxgrid.

+1

from flexboxgrid.

I will not be supporting any preprocessors. The workflow will be CSS only. 7.0 was stalled for way too long over preprocessor issues and I want this project to continue to look forward. Apologies.

from flexboxgrid.