Comments (5)
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!
from 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
from frow.
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?
from frow.
I am using Fedora and OSX to develop.
from frow.
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
from frow.
Related Issues (20)
- Transform(rotate) utility classes
- Automatic or utility transition classes
- CSS3 variable support
- .frow .nowrap by default?
- Investigate .frow>* max-width: 100%
- .button-none and .link-none improvements
- New gutter system HOT 1
- Improved .frow-container
- Better Sass Media Queries
- Better anchor tag `text-decoration: none` underline rule
- Make docs install-able as an offline PWA
- .row-center-xs type classes
- Label color variable
- Style :read-only to match :disabled
- Visibility attribute from collab.tools repo
- Enable :focus-visible
- display: block for SVG element HOT 2
- Sass is deprecating division with "/" and throws a lot of warnings HOT 4
- Vertical Range/Slider Appearance
- Sass compile error while customizing HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frow.