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-app [path_to_css_folder] # 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-[flex-flow-css-value]-[align-items-css-value]-[justify-content-css-value]
 
# 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-[flex-flow-css-value]
 
# OPTIONAL Classes 
.iflex # As a seperate class in order to display: inline-flex; 
 
# align-content pattern 
.ac-[align-content-css-value]  # e.g .ac-center 
 
# align-self pattern 
.as-[align-self-css-value]     # 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:

<div>
   <span> One </span>
   <span> Two </span>
   <span> Three </span>
</div>

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:

<div class="flex-colWrap"> ... </div>

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
<div class="flex-colR-center-sBetween"> ... </div>
 
# Example with only align-items (notice the 'none' it means no specified value)
# It is required because .flex-colR-center would be invalid syntax
<div class="flex-colR-center-none"> ... </div>

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
<div class="flex-rowRWR-none-sAround iflex"> ... </div>
 
# 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: [e-mail]. More information about flex-box can be found here.

License

MIT