flexmix

1.8.0 • Public • Published

Flexmix

A Sass mixin that make your work with flexbox easy and quick!

Installation

You can get it on npm:

    npm install flexmix --save

or bower:

    bower install flexmix --save

Setup

Just @import flexmix in your sass or scss file and you're good to go.

Usage

So.. do you wanna be a cool kid and use flexbox on your project? No problem!

flexmix is a easy-to-use sass mixin(actually, more like a shortcut) that helps you to write flexbox properties as quick as possible. check this out:

.my-container{
 @include flexmix(row, nowrap, flex-start, center, center);
}

// results in:
.my-container{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: center;
 align-content: center;
}

If you wanna know more about flexbox, see this complete guide to flexbox by Chris Coyier on css-tricks

That was pretty easy! The only rule is the order of things. For now, flexmix only works if you follow this order of properties on the mixin:

flex-direction > flex-wrap > justify-content > align-items > align-content

"Why?" you may ask. Well, at this moment I can't figure it out how to set us free from this, but, if you my dear fellow sass-hacker-master-coder-extreme-developer know how to do it, just feel free to fork me =)

...but, you may also ask:

"Ok, I got it. But can I do this quickly?"
"I have bills to pay! Can it be more faster?"
"My cat is having some trouble to poop in the right place, can you help me?"

My answer for you is: Yes! Sure! Probably not.

check this:

my-second-container{			
 @include flexmix(r, nw, fs, c, c);
}

// results in:
my-second-container{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: center;
 align-content: center;
}

just like that!

You can even shorten the mixin name to @include flmx() or @include fm() and use both ways to write. In fact, you can mix everything. Whatever that works for you.


    @include fm(row, nw, c, space-around, s);

or


    @include flmx(row, rr, fs, baseline, center);

or


    @include flexmix(rr, wr, c, s, c);

Now you can write flexbox properties really really fast. just follow the only rule and you're a good to go. Take a look on the shortcuts names bellow:

Properties and shortcuts:

flex-direction flex-wrap justify-content
row or r wrap or w flex-start or fs
row-reverse or rr nowrap or nw flex-end or fe
column or cl wrap-reverse or wr center or c
column-reverse or clr space-between or sb
space-around or sa
align-items align-content
flex-start or fs flex-start or fs
flex-end or fe flex-end or fe
center or c center or c
baseline or b space-between or sb
stretch or s space-around or sa
stretch or s

disclaimer: For now, I don't have any plans to make flexmix work for flexbox items, because of the flex: shorthand that is already really easy to use.

Next step

My next step is provide snippets for both Atom and Sublime Text and make this tool more natural as possible to your workflow.

License

This project is licensed under the terms of the MIT License.

Package Sidebar

Install

npm i flexmix

Weekly Downloads

0

Version

1.8.0

License

MIT

Last publish

Collaborators

  • davi_mbatista