@fishtank/grid

    3.0.1 • Public • Published

    Fishtank Grid

    Installation

    npm install @fishtank/grid

    Dev Environment Setup

    # install dependencies
    npm install
     
    # serve with hot reload at localhost:8080
    npm run dev

    Grid Build and Test

    # lint SCSS
    npm run test
     
    # build uncompressed grid 
    npm run build:css
     
    # build grid for production with minification
    npm run build
     

    Usage

    The Fishtank grid comes in 2 versions, flexbox and css display:grid. Flexbox has wider adoption, and is a safe choice for projects that require wider browser compatibility. As of June 2018, The display:grid version has fairly high adoption with modern browers, but is not recommended for projects that need to support IE10 and earlier or Chrome 57 and earlier. Please consult caniuse.com to check adoption.

    Container

    The "ft-container" class sets the main container width, across responsive breakpoints. These are fixed widths with minimum breakpoints at 1440px, 1008px, and 752px (desktop down to tablet vertical sizes). Below 752px the grid becomes fluid, and is set the max width of the vuewport size.

    <div class="ft-container">

    By adding the "ft-fluid" class to same element, the container becomes fluid through all breakpoints

    <div class="ft-container ft-fluid">

    Flexbox Grid

    The Flexbox grid provides a 12 column layout to provive layout and alignment of content. Add "ft-row-flex" to start your flexbox row container. Use the notation of "ft-col-[breakpoint size][number of columns] to define the number of colums of the cell occupies.

    <div class="ft-container">
      <div class="ft-row-flex">
        <div class="ft-col-xs6"></div>
      </div>
    </div>

    Display:Grid

    CSS Display:grid offers the opportunity to use a grid system designed natively for the browser. However, to support the overall Fishtank grid and spacing guidelines, we have implement a series of utility class names for row and column alignments up to a 12 column grid.

    Add "row-dgrid" to start your display:grid row container. Add the "ft-col-fixed-[Number of columns]" class name to element to define the number of columns displayed per row. Display:grid will automatically display the cells at the correct % width to display that number of cells per row. It will continue to flow the cells into multiple rows, maintaining the same cell width.

    <div class="ft-row-dgrid ft-col-fixed-4"></div>

    The responsive column pattern functions similarly to the flexbox grid.

    <div class="ft-row-dgrid">
      <div class="ft-col-xs12 ft-col-sm6 ft-col-md8 ft-col-lg3"></div>
      <div class="ft-col-xs12 ft-col-sm6 ft-col-md4 ft-col-lg9"></div>
    </div>

    There are also offset utility classes.

    <div class="ft-row-dgrid">
      <div class="ft-col-offset-start-xs2 ft-col-offset-end-xs5"></div>
      <div class="ft-col-offset-start-xs9 ft-col-offset-end-xs13"></div>
    </div>

    [TODO: Flexbox alignment and order class names; Display:grid template layouts]

    Install

    npm i @fishtank/grid

    DownloadsWeekly Downloads

    3

    Version

    3.0.1

    License

    Apache-2.0

    Unpacked Size

    110 kB

    Total Files

    13

    Last publish

    Collaborators

    • dmargol_bloomberg
    • hlopezgudiel
    • gneraltsao
    • ransanjeev
    • yoginpatel
    • oewulum
    • kwebb30