Allow user to use just the grid portion of framework
apfranzen opened this issue · comments
I would like the ability to use just the Grids portion of the frow framework and not the other modules. I have a project that requires 24 columns and your framework handles this nicely.
Is this possible? Thank you very much!
Hey thanks so much for the request! Being able to load each part of Frow individually is already a planned feature, as mentioned here. However, it's already partially implemented, and you can already cut out a bit of the other stuff.
If you're loading in Frow using Sass, when you build the CSS, if you have a variable set in your own Sass (before loading Frow) with $frow-enable-forms and $frow-enable-buttons set to false, it will only load the Frow classes and the grid system, without all the form styling. You can see the other Frow variables in Frow's _variables.sass file. This will cut out a large portion of the extra stuff for your build, and future versions of Frow will go even further to enable similar options.
If you're just pulling in the pre-built Frow CSS, I will first encourage you to dive into using Sass, as you'll find it magical and awesome. But, I realize that some people just want the CSS, and so perhaps in the future I can look into creating multiple versions of the CSS with the various flags checked.
Are you using Frow via Sass, or are you just using the pre-compiled CSS? You mention needing 24 columns so I'm assuming you are using Sass, as there is also the Frow variable $grid-max-columns which you can use to set the columns max from 12 to 24.
Thanks again for checking out Frow!
I am using the precompiled CSS at the moment, so I haven't taken the plunge into Sass yet. I am currently achieving the 24 columns with this:
<div class="frow gutters">
<div class=".col-md-1-24">
<p>Column 1</p>
</div>
</div>
What advantage is there to using the Sass variable $grid-max-columns compared to how I am currently accomplishing this?
Thanks so much for the help. I am playing around with different CSS options in order to give some visual structure to the drop destination that different form elements will be dropped on. Within the 24 columns will be rows, but I have not begun to implement this yet. This is what I currently have using Frow: https://codepen.io/apfranzen/pen/GMGLdx
Ok so what you're experiencing is actually not Frow's grid system, but rather just Frow's flexbox system. Frow supports only up to 12 columns by default, unless you enable more via the Sass variable. If you inspect your col-md-1-24 class in a browser, you'll see that it's not receiving any rules based on that name. However, in your demo I changed one column to col-md-1-12 and it still wasn't receiving any rule, which it should be. So I noticed you accidentally put the "." before each of the class names in the HTML. It should just be
<div class="col-md-1-12">
not
<div class=".col-md-1-12">
The "." is only needed in the CSS/Sass files. Easy mistake to miss, no worries!
So then, why is your experiment working if it's not even using Frow's grid system? Well, because they are still inside of a Frow! Frow is utilizing the CSS Flexbox feature to organize all content within a Frow. In your case, it's working because all content is identical, so each column width is identical. If you were to start making each column's content different, your columns would start to become different widths, and may even flow into multiple rows. To ensure that you do end up with 24 equal rows, you'll want to use the Sass variable. Which will make Frow create the rules for "col-md-X-24".
If you've never used Sass before, it can seem a little scary at first, but basically you just need a script to run that converts Sass to CSS each time you want to test your changes. An example way to do this would be to use a simple Gulp script. Sass also enables some awesome shortcuts in CSS, such as nesting rules, making the CSS way easier to write, and is definitely worth picking up as skill/tool for use.
In the past I made my own simple Gulp script for simple websites, I'll take a look into open sourcing it. What OS are you coding in?
I am using Fedora and OSX to develop.
I'm marking this issue as closed, as the new Customize features of Frow allow for this feature. You can find this, and all of the other available customizations at: http://frowcss.com/customize.html