flex-app
Tired of writing the same flex-box code every time? "flex-app" is a CSS flex-box class utility library. It lets you build website layouts much faster while also saving you the hassle of rewriting the same code.
Installation
Use the package manager npm to install flex-app globally, so you can use it anywhere.
npm install flex-app -g
Usage
flex- # Path where the CSS file will be installed # After this make sure you add the CSS file into your index.html file # The CSS file will be in the specified by you directory Options:--help # Gives you information about how to use the module --notmin # Returns a prettified version of the library (5kb larger)
Keep in mind that --notmin
file's size is slightly larger.
File Size
Using the normal minified version gives you a file about 55kb
in size while when using the not minified (--notmin
) option it is about 60kb
. This means that no matter what option you choose my css class utility library will bearly make a change on your apps load time.
Documentation
Class naming pattern:
# Full syntax .flex--- # or you can use the simple syntax if you don't need # align-items AND justify-content # keep in mind that if you want to use only align-items OR justify-content # the other value must be 'none' # for example .flex-[flex-flow]-none-[justify-content] or # .flex-[flex-flow]-[align-items]-none # Note that .flex-[flex-flow]-none-none is NOT valid # Instead use the short syntax # Short syntax .flex- # OPTIONAL Classes .iflex # As a seperate class in order to display: inline-flex; # align-content pattern .ac- # e.g .ac-center # align-self pattern .as- # e.g .as-fStart # flex-grow | flex-shrink .fGrow # Same as flex-grow: 1; .fShrink # Same as flex-shrink: 1; # BONUS .noOutline # Removes any outline on an element with on focus / click event .noSelect # Removes ability to highlight text in an element .fade # Adds transition of 0.4s ease for smooth animations .fadeIn # Opacity 1 (to show element) .fadeOut # Opacity 0 (to hide element)
Let's say we have the following HTML snippet:
One Two Three
If you want to make the parent div display: flex; flex-flow: column;
you should add this class: .flex-col
if you wanted flex-wrap: wrap;
as well you would add this class: .flex-colWrap
. This is the result:
...
You see how simple this is if you have some prior flex-box knowledge you should be soon good to go. Now let's take a look at a more advanced example with the following css display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between;
# Example with more advanced syntax (using align-items and justify-content)# Notice how colR stands for column and R for reverse# As well as that align-items: center is simply center# And justify-content: space-between is sBetween ... # Example with only align-items (notice the 'none' it means no specified value)# It is required because .flex-colR-center would be invalid syntax ...
Possible options:
# For flex-flow (first argument): # .flex-[THIS ONE]-[align-items-css-value]-[justify-content-css-value] row # flex-direction: row; col # flex-direction: column; rowR # flex-direction: row-reverse; colR # flex-direction: column-reverse; rowWrap # flex-flow: row wrap; colWrap # flex-flow: column wrap; rowWrapR # flex-flow: row wrap-reverse; colWrapR # flex-flow: column wrap-reverse; rowRWrap # flex-flow: row-reverse wrap; colRWrap # flex-flow: column-reverse wrap; rowRWrapR # flex-flow: row-reverse wrap-reverse; colRWrapR # flex-flow: column-reverse wrap-reverse; # For align-items (second argument): # .flex-[flex-flow-css-value]-[THIS ONE]-[justify-content-css-value] none # Special option if you don't want to change anything center # align-items: center; fStart # align-items: flex-start; fEnd # align-items: flex-end; stretch # align-items: stretch; baseline # align-items: baseline; # For justify-content (third-argument): # .flex-[flex-flow-css-value]-[align-items-css-value]-[THIS ONE] none # Special option if you don't want to change anything center # justify-content: center; fStart # justify-content: flex-start; fEnd # justify-content: flex-end; sAround # justify-content: space-around; sBetween # justify-content: space-between; sEvenly # justify-content: space-evenly; # For align-content: # .ac-[align-content-css-value] center # align-content: center; fStart # align-content: flex-start; fEnd # align-content: flex-end; sAround # align-content: space-around; sBetween # align-content: space-between; sEvenly # align-content: space-evenly; stretch # align-content: stretch; baseline # align-content: baseline; # For align-self: # .as-[align-self-css-value] center # align-self: center; fStart # align-self: flex-start; fEnd # align-self: flex-end; stretch # align-self: stretch; baseline # align-self: baseline; # For flex-grow & flex-shrink: # .fGrow or .fShrink fGrow # flex-grow: 1; fShrink # flex-shrink: 1; # Bonus: .noOutline # outline: none; (on focus) .noSelect # user-select: none; .fade # transition: all 0.4s ease 0s; .fadeIn # opacity: 1; .fadeOut # opacity: 0;
With that said you should be able to make any combination you like and have it work.
Remember all .flex...
classes have display: flex;
so in order to change it to inline-flex
you should use the optional class .iflex
.
# Example of inline flex usage ... # Also remember wherever you see a 'R' it means reverse# in the example above the class is equivalent to:# display: flex;# flex-flow: row-reverse wrap-reverse;# justify-content: space-around;# and align-items is set to the default value
Support
If you have any suggestions or found any bugs, please email me at: valchygaming@gmail.com. More information about flex-box can be found here.