• Stars
    star
    156
  • Rank 239,589 (Top 5 %)
  • Language
    HTML
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Component CSS for grids

SUIT CSS components-grid

Build Status

A CSS grid component. The grid makes use of flexbox and box-sizing to provide features that float-based layouts cannot.

N.B. This component relies on particular dimensions being applied to cells in the grid via other classes. For example, suitcss-utils-size.

Read more about SUIT CSS.

Installation

  • npm: npm install suitcss-components-grid
  • Download: zip

Features

  • Fluid layout.
  • Intelligent cell wrapping.
  • Evenly fill cell spacing
  • Equal height columns
  • Horizontal centering of cells.
  • Custom vertical alignment of cells (top, bottom, or middle).
  • Cell width is controlled independently of grid gutter.
  • Infinite nesting.

Available classes

  • Grid: core component
  • Grid--alignCenter: center-align all child cells
  • Grid--alignRight: right-align all child cells
  • Grid--alignMiddle: middle-align all child cells
  • Grid--alignBottom: bottom-align all child cells
  • Grid--fill: evenly distribute space amongst all child cells
  • Grid--fit: fit cells to their content
  • Grid--equalHeight: all child cells match height of the tallest
  • Grid--withGutter: adds a gutter between cells

Configurable variables

  • --Grid-gutterSize: the width of the gutter applied by the Grid--withGutter modifier class.

Use

A simple grid is easy to create. A grid container can have any number of child cells. When used with Grid--fill space is evenly distributed without need for sizing utilities.

Note Elements that are direct descendants of Grid will be flex items. It's recommended to use an element that can easily have classes attached later if needed, such as u-sizeFill or u-flexJustifyCenter

<div class="Grid Grid--fill Grid--withGutter">
  <div><!-- cell content --></div>
  <div><!-- cell content --></div>
  <div><!-- cell content --></div>
  <div><!-- cell content --></div>
</div>

For more granular control over layout make use of modifiers and sizing utilities.

<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fill|Grid--fit|Grid--equalHeight]">
  <div class="u-size1of2 u-lg-size6of12"></div>
  <div class="u-size1of2 u-lg-size4of12"></div>
  <div class="u-size1of3 u-lg-size2of12"></div>
  <div class="u-size1of3"></div>
</div>

Fit cells to their content and allow others to fill the remaining space.

<div class="Grid">
  <div class="u-sizeFit">Fit to content</div>
  <div class="u-sizeFill">Take up remaining space</div>
</div>

Widths and offsets

Cell widths and offsets can be controlled using the responsive sizing utilities and responsive offset utilities, respectively.

One limitation of creating grid gutters in the manner shown above is that it prevents any offset utilities applied directly to the Grid component from functioning as expected.

GOOD:

<div class="Grid Grid--withGutter">
  <div class="u-size1of2 u-before1of4 u-after1of4">
    {{>partial}}
  </div>
</div>

BAD:

<div class="Grid Grid--withGutter u-before1of4 u-after1of4">
  <div>
    {{>partial}}
  </div>
</div>

You can nest grids in any context, including one that uses dimension or offset utilities, but keep in mind that the dimensions will be relative to the grid's width, and not the width of the whole application.

<div class="u-before1of4 u-after1of4">
  <div class="Grid Grid--withGutter">
    <div class="u-size1of2"> <!-- 50% of the width of the Grid -->
      {{>partial}}
    </div>
  </div>
</div>

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To lint code with postcss-bem-linter and stylelint

npm run lint

To generate the testing build:

npm run build-test

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox (latest)
  • Safari 6.2+
  • Internet Explorer 10+
  • iOS 7+
  • Android 4.4+
  • Windows Phone 8.1+

Refer to the caniuse page for flexbox

More Repositories

1

suit

Style tools for UI components
HTML
3,801
star
2

utils

CSS utility classes
JavaScript
304
star
3

base

CSS base styles for web apps (a thin layer on top of normalize.css)
HTML
194
star
4

preprocessor

A future-facing CSS preprocessor (used by SUIT CSS)
JavaScript
135
star
5

components-flex-embed

Component CSS for intrinsic ratio embeds
HTML
111
star
6

stylelint-config-suitcss

SUIT CSS config for Stylelint
JavaScript
77
star
7

components-arrange

Component CSS for arranging/aligning horizontal cells, a bit like flexbox
HTML
72
star
8

utils-flex

CSS flexbox utilities
HTML
63
star
9

components-button

Component CSS for buttons
HTML
52
star
10

rework-suit

Collection of "pure CSS" plugins for Rework (DEPRECATED)
JavaScript
50
star
11

rework-suit-conformance

Rework plugin for SUIT CSS to check component style isolation (DEPRECATED)
JavaScript
41
star
12

utils-size

CSS sizing utilities
CSS
38
star
13

components

Collection of SUIT CSS components
CSS
34
star
14

theme

Example theme for SUIT CSS
CSS
29
star
15

generator-suit

A Yeoman generator for SUIT packages
JavaScript
26
star
16

utils-text

CSS text utilities
HTML
23
star
17

stylelint-suitcss

A collection of Stylelint plugins for SUIT CSS
JavaScript
22
star
18

components-button-group

Component CSS for button-groups (DEPRECATED)
HTML
21
star
19

components-test

Component CSS to help test the visual presentation of components
CSS
19
star
20

utils-layout

CSS layout utilities
HTML
19
star
21

suitcss.github.io

SUIT CSS project site
HTML
18
star
22

utils-link

CSS link utilities
HTML
16
star
23

utils-display

CSS display utilities
HTML
15
star
24

utils-position

CSS positioning utilities
HTML
13
star
25

utils-state

CSS state utilities (DEPRECATED)
HTML
13
star
26

utils-align

CSS vertical-alignment utilities
HTML
12
star
27

component-builder-suit

A Component(1) builder plugin for SUIT CSS (DEPRECATED)
JavaScript
10
star
28

utils-before

CSS leading offset utilities
CSS
8
star
29

utils-after

CSS trailing offset utilities
CSS
8
star
30

utils-offset

CSS offset utilities
JavaScript
8
star
31

initial-values

1
star