Use flexbox in your HTML as part of the layout.
- Responsive
- Customizable breakpoints
- Layout in the HTML
- Quick sketching
FlexProperties enables you to create layouts as quickly as you can sketch a wireframe.
Check out the FlexProperties playground
<section>
<h1>Plans</h1>
<div layout="row" layout-align="space-between end">
<article flex="100" flex-gt-md="33">
<h2>Hobby</h2>
</article>
<article flex="100" flex-gt-md="33">
<h2>Standard</h2>
</article>
<article flex="100" flex-gt-md="33">
<h2>Enterprise</h2>
</article>
</div>
</section>
npm install flexproperties -D
yarn add flexproperties
There are some built files in dist/
one that has the vendor prefixes and one that isn't.
https://github.com/MartinMuzatko/flexproperties/tree/master/dist
Via rawgit.com
flexproperties.prefixed.min.css
FlexProperties consists of many different settings that define features, breakpoints and file-size. There is a build tool in progress.
If you are not satisfied with the default setup, feel free to change the variables before importing FlexProperties. Default setup:
// Sets breakpoints
$breakpoints: (
(sm, 600px)
(md, 960px)
(lg, 1200px)
);
// Sets features to use, available globally
$features: (
'order'
'offset'
'layout'
'flex'
'layout-align'
'visibility'
);
// Features for each breakpoint
$breakpoint-features: (
'order'
'offset'
'layout'
'flex'
'layout-align'
'visibility'
);
$ie: false;
// Defines grid percentages
// 100/5 = 20 steps (5,10,15,20,25, etc)
// 100/10 = 10 steps (10,20,30, etc)
// available values: (1,2,5,10,20,25,50)
$flex-step: 5;
@import '<path to node_modules>/flexproperties/src/flex-grid.scss'
With webpack, you can import the file using @import '~flexproperties'
.
Of course you still have to define your config.
Reviving the once popular angular material grid property framework.
As demonstrated on their official website. Since flexbox, this is the greatest grid framework/library that I have found so far. Every other flexbox grid framework lacks very fundamental usage features.
Currently, I'm looking to improve on the code output (smart selectors) I created a codepen to showcase all different layout-align scenarios with the reduced code.
Yes! Flexbox is safe to use for IE10 and upwards.
See some real websites using flexproperties:
I'm creating an online build tool, that lets you interactively choose features you want for your own breakpoints. Flexgrid outputs a lot of rules (see comparison below). Sometimes, you won't need flex-offset
for every breakpoint. While the SASS file is already very powerful to do that, a tool has to be created for that.
https://martinmuzatko.github.io/flexmaid/
The original Source Code belongs to Angular licensed as MIT They had flexbox as html properties in their original angular material package. However, they do not provide a customizable or standalone version.
Since then, I heavily optimized and adapted flex-grid to serve as general purpose layout library. It is almost a complete rewrite.