Newton's Programmatic Measurements

    @makay/flexbox

    3.0.0 • Public • Published

    @makay/flexbox

    npm (scoped) license

    Tiny flexbox library (1.65KB gzipped) to help you build responsive layouts quickly and without writing any CSS.

    Goals of this library:

    • To expose most of flexbox's properties as human-readable CSS classes.
    • To not change any properties of classes/elements outside the library.
    • To be able to be used alongside other CSS libraries and frameworks without breaking anything*.
    • To be as small as possible while still achieving all the previous goals.

    * There might be collisions with the class names of some libraries or frameworks (like Bootstrap's ".row"). If possible, exclude the grid systems offered by these as you will not be needing them anyway. If you really have to keep them, make sure this library is loaded after them and things might still work for the most part.

    What is flexbox?

    Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. [Source]

    If you're unfamiliar with flexbox be sure to take a look at the following resources (in no specific order):

    Installation

    npm (recommended)

    Run npm install @makay/flexbox or yarn add @makay/flexbox to install the latest version.

    Include node_modules/@makay/flexbox/flexbox.css or node_modules/@makay/flexbox/flexbox.min.css in your bundle using your preferred bundler.

    CDN

    Include one of the following stylesheets in your page:

    https://cdn.jsdelivr.net/npm/@makay/flexbox@3.0.0/flexbox.css

    https://cdn.jsdelivr.net/npm/@makay/flexbox@3.0.0/flexbox.min.css

    Documentation

    After installing the library, you can start using it by adding the classes listed below to the elements of your page.

    Container classes

    Class CSS properties
    row display: flex;
    flex-shrink: 0;
    flex-direction: row;
    column display: flex;
    flex-shrink: 0;
    flex-direction: column;

    Container modifiers

    Class CSS properties
    reverse flex-direction: row-reverse;
    or
    flex-direction: column-reverse;
    shrink flex-shrink: 1;
    wrap-reverse flex-wrap: wrap-reverse;
    wrap flex-wrap: wrap;
    nowrap flex-wrap: nowrap;
    align-start align-items: flex-start;
    align-center align-items: center;
    align-end align-items: flex-end;
    align-baseline align-items: baseline;
    align-stretch align-items: stretch;
    align-content-start align-content: flex-start;
    align-content-center align-content: center;
    align-content-end align-content: flex-end;
    align-content-stretch align-content: stretch;
    align-content-space-between align-content: space-between;
    align-content-space-around align-content: space-around;
    justify-start justify-content: flex-start;
    justify-center justify-content: center;
    justify-end justify-content: flex-end;
    justify-space-between justify-content: space-between;
    justify-space-around justify-content: space-around;

    Child classes

    Class CSS properties
    (any) max-width: 100%;
    align-self-auto align-self: auto;
    align-self-start align-self: flex-start;
    align-self-center align-self: center;
    align-self-end align-self: flex-end;
    align-self-baseline align-self: baseline;
    align-self-stretch align-self: stretch;
    flex-none flex: none;
    flex flex-grow: 1;
    flex-X flex-basis: calc(X*100%/12);

    X can range from 1 to 12, inclusive.

    Child media queries

    Class max-width CSS properties
    flex-lg-X 1199px flex-basis: calc(X*100%/12);
    flex-md-X 991px flex-basis: calc(X*100%/12);
    flex-sm-X 767px flex-basis: calc(X*100%/12);
    flex-xs-X 575px flex-basis: calc(X*100%/12);

    X can range from 1 to 12, inclusive.

    Utility classes

    Class CSS properties
    padded padding: 16px;
    hidden display: none;

    Utility media queries

    Class max-width CSS properties
    hidden-lg 1199px display: none;
    hidden-md 991px display: none;
    hidden-sm 767px display: none;
    hidden-xs 575px display: none;
    Class min-width CSS properties
    hidden-gt-lg 1200px display: none;
    hidden-gt-md 992px display: none;
    hidden-gt-sm 768px display: none;
    hidden-gt-xs 576px display: none;

    Contribute!

    Found an issue or want to add a new feature? Feel free to open an issue or make a pull request!

    Keywords

    none

    Install

    npm i @makay/flexbox

    DownloadsWeekly Downloads

    19

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    24.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • makay