npm install @fishtank/grid
Dev Environment Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev
Grid Build and Test
# lint SCSSnpm run test# build uncompressed gridnpm run build:css# build grid for production with minificationnpm run build
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.
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.
By adding the "ft-fluid" class to same element, the container becomes fluid through all breakpoints
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.
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.
The responsive column pattern functions similarly to the flexbox grid.
There are also offset utility classes.
[TODO: Flexbox alignment and order class names; Display:grid template layouts]