-
Notifications
You must be signed in to change notification settings - Fork 26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow user to use just the grid portion of framework #6
Comments
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:
What advantage is there to using the Sass variable |
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 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 |
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!
The text was updated successfully, but these errors were encountered: