Naboo's Podracing Misadventure

    @webdev-tools/css-flex-layout

    0.1.4 • Public • Published

    css-flex-layout

    A tiny framework based on css flex box to manage grids without flood your html

    It is only necessary to add 1 class to the columns container. Keep your code slim and clean.

    Usage:

    Auto sized columns

    Divide all available space between columns. If a column don't fit on the line, it will break to the next line.

    <section class="fl-cols-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </section>

    Specific columns per line

    Define the number of columns you want per line and available space will be divided to fit the columns on the line and the other columns will break to the next line.

    Columns Class
    2 .fl-2-cols-container
    3 .fl-3-cols-container
    4 .fl-4-cols-container
    6 .fl-6-cols-container
    <section class="fl-3-cols-container">
      <aside>001</aside>
      <aside>002</aside>
      <aside>003</aside><!-- break to next line -->
      <aside>004</aside>
      <aside>005</aside>
      <aside>006</aside><!-- break to next line -->
      <aside>007</aside><!-- alone on the last line -->
    </section>

    Gutters

    Gutters add padding to the columns, without change its size.

    Padding class
    5px .fl-gutter-5 or .fl-gutter-tb-5 or .fl-gutter-rl-5
    10px .fl-gutter-10 or .fl-gutter-tb-10 or .fl-gutter-rl-10
    15px .fl-gutter-15 or .fl-gutter-tb-15 or .fl-gutter-rl-15
    20px .fl-gutter-20 or .fl-gutter-tb-20 or .fl-gutter-rl-20

    tb = Top and Bottom rl = Right and Left

    <section class="fl-cols-container fl-gutter-5">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </section>

    Spacers

    Spacers add margin bottom to all columns, pushing the cells that fell to the next line.

    Padding class
    5px .fl-spacer-5
    10px .fl-spacer-10
    15px .fl-spacer-15
    20px .fl-spacer-20
    <section class="fl-2-cols-container fl-spacer-20">
      <aside>001</aside>
      <aside>002</aside><!-- break to next line -->
      <!-- 20px spacer between  -->
      <aside>003</aside>
      <aside>004</aside>
    </section>

    Install

    npm i @webdev-tools/css-flex-layout

    DownloadsWeekly Downloads

    5

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    23.1 kB

    Total Files

    19

    Last publish

    Collaborators

    • carlos.algms