npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

postcss-layout

v1.2.0

Published

A postcss plugin to generate common, cross browser, CSS layouts, using the custom property 'layout', includes a grid layout (with optional gutters).

Downloads

15

Readme

postcss-layout Travis Build Status

A PostCSS plugin for some common CSS layout patterns and a Grid system. Demo

The plugin provides three new properties and one @rule.

  • The layout property in a rule makes the selected elements a container for child elements with a certain layout.
  • The @grid @rule defines a grid.
  • The grid property in a rule gives the selected elements a grid defined in @grid.
  • The [gridname]-span property in a rule defines the width of child elements in a grid container.

The plugin uses CSS calc for the grid system. Layouts have been tested to work in ie9+.

See the demo or the example in the example/ directory for usage.

All layout elements are given box-sizing: border-box; by default.

New!

You can now add buffer and shift values to your grid span properties to create space around elements (with buffer values) or move them horizontally (with shift value) without bumping neighbours. Read more bellow.

Install

npm install postcss-layout --save-dev

Tips

It is recommended to use the following HTML element arrangment for your layouts, for the most flexible approach:

<div class="wrapper"> <div class="container"> <div class="item"></div> </div> </div>

or as I like to do it:

<div class="container"> <div class="inner"> <div class="item"></div> </div> </div>

You will quickly bulk up your final CSS file if you use the layout property everywhere you want a layout. Preferably, create a few reusable layout classes with layout, and apply them to your elements.

Layouts

stack

.container {
  layout: stack [left|right|center][shrink];
}

Creates a container with a vertically stacked 'tower' of elements(items), using display:block or display:table, that can be optionally aligned left, right or center. Another optional property value is shrink which causes a stacked element to shrink wrap its contents; it won't expand to fill its parent, instead make its width as small as possible to fit its contents.

Caveats

Firefox has buggy table layout, and will ignore min-height or min-width on shrink / display:table elements(items).

Example

/* Input. */
.container {
  layout: stack right shrink;
}

/* Output */
.container {
  box-sizing: border-box;
}
.container > * {
  box-sizing: border-box;
  display: table;
  margin-left: auto;
}

lines

.container {
  layout: lines [top|bottom|middle][left|right|center][nowrap];
}

Creates horizontally arranged child elements(items) in the container, using display:inline-block. There are optional horizontal and vertical alignment property values. Child elements in a layout: lines container will wrap when they are longer than the container width, unless nowrap is specified. This layout sets font-size:0 on the container to remove whitespace, then sets font-size:initial on child elements to reset font-size. Be aware of this as your font sizes may not be what you expect.

Caveats

Using the vertical align options automatically sets nowrap, you cannot vertically allign more than one line with display:inline-block and psuedo element technique. To vertically align multiline items use the layout demonstrated in the example directory, which uses two nested layouts, the first for vertical alignment, then horizontal alignment inside the vertically aligned element.

Grids cannot use em units for gutters with layout:lines because the container has font-size:0 to deal with whitespace.

Example

/* Input. */
.container {
  layout: lines bottom center;
}

/* Output. */
.container {
  text-align: center;
  box-sizing: border-box;
  font-size: 0;
}
.container > * {
  box-sizing: border-box;
  display: inline-block;
  text-align: initial;
  vertical-align: bottom;
  font-size: initial;
}
.container:after {
  position: relative;
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

flow

.container {
  layout: flow [left|right];
}

Creates horizontally arranged child elements(items) in the container, using float:left by default. There are optional horizontal arrangement property values. Child elements in a layout: flow container will wrap when they are longer than the container width. This layout uses a pseudo element clear-fix technique.

Caveats

Using left or right options will align items left or right and also reverse item arrangement because floats are being used to create the layout.

Example

/* Input. */
.container {
  layout: flow right;
}

/* Output. */
.container {
  text-align: initial;
  box-sizing: border-box;
  font-size: initial;
}
.container > * {
  box-sizing: border-box;
  display: initial;
  float: right;
  text-align: initial;
  vertical-align: initial;
  font-size: initial;
}
.container:after {
  position: relative;
  content: "";
  display: table;
  clear: both;
}

columns

.container {
  layout: columns;
}

Creates horizontally arranged child elements(items), using display:table and display:table-cell that stretch in columns from the top to the bottom of the selected container elements, and horizontally fill their container. NOTE the .container will have a width set of 100% by default.

Example

/* Input. */
.container {
  layout: columns;
}

/* Output */
.container {
  width: 100%;
  table-layout: fixed;
  display: table;
  box-sizing: border-box;
}
.container > * {
  box-sizing: border-box;
  display: table-cell;
}

rows

.container {
  layout: rows;
}

Creates vertically arranged child elements(items), using display:table and display:table-row that stretch in rows from the left to the right of the selected container elements, and vertically fill their container. NOTE the .container will have a width set of 100% by default.

Example

/* Input. */
.container {
  layout: rows;
}

/* Output */
.container {
  width: 100%;
  table-layout: fixed;
  display: table;
  box-sizing: border-box;
}
.container > * {
  box-sizing: border-box;
  display: table-row;
}

Grids

Define a grid

@grid GRID_NAME {
  count: NUMBER_OF_COLUMNS;
  [gutter: GUTTER_VALUE [VERTICAL_GUTTER_VALUE];]
}

Define a grid with name GRID_NAME (eg. g12), number of columns NUMBER_OF_COLUMNS (eg. 12), and optional gutter GUTTER_VALUE (eg. 10px). An optional VERTICAL_GUTTER_VALUE (eg. 15px) can be set, if set then the first GUTTER_VALUE becomes the horizontal gutter.

Use a grid

.container {
  layout: lines;
  grid: GRID_NAME;
}

Use the grid property in a container to set which defined grid you want to use. You must set layout:lines or layout:flow or layout:columns on the container for the grid to work, currently the only layout values which respond to the grid and span properties. NOTE the .container will have negative margins if gutter was set, so it is recommended to place the grid .container in its own wrapper container.

.child {
  GRID_NAME-span: WIDTH [, BUFFER / BUFFER_LEFT BUFFER_RIGHT [, SHIFT ] ];
}

Use the GRID_NAME-span property in a child to define its width relative to the container grid. You can also optionally provide BUFFER values; A single BUFFER value adds that much spacing to both the left and right side of the child. Use BUFFER_LEFT and BUFFER_RIGHT individual values to set different spacing for each side. There is also an optional SHIFT value; A positive SHIFT value moves the child right, a negative SHIFT value moves the child left, this move will not affect the flow of the other child elements, you must provide a value for BUFFER to use SHIFT, just use 0 if you don't want any buffer.

Caveats

As mentioned before, you cannot use em units for gutters in a layout:lines container. You cannot use gutters with layout:columns, and the items will always stretch to fill remaining space.

Example

/* Input. */
@grid g12 {
  count: 12;
  gutter: 10px;
}

.container {
  layout: lines;
  grid: g12;
}

.child {
  g12-span: 4, 2 0, -1;
}

/* Output. */
.container {
  box-sizing: border-box;
  margin-right: -5px;
  margin-left: -5px;
}
.container > * {
  box-sizing: border-box;
  display: inline-block;
  text-align: initial;
}
.container:before {
  position: relative;content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.child {
  left: -8.333333333333334%;
  margin-right: 5px;
  margin-left: calc(16.666666666666668% + 5px);
  width: calc(33.333333333333336% - 10px);
}