o-grid

CSS JS

Grid for responsive layouts

View on GitHub

Quick start

Using the build service

Add the following token to your script and link tags (how do I do that?):

o-grid@^4.3.3

For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-grid"@"^4.3.3"

For more information see the Origami build process.

default


			

Grid with all default settings

snappy


			

Responsive grid that snaps between a larger fixed layout at each breakpoint

resized


			

Responsive grid with breakpoints reallocated to 400px, 800px and 1000px and gutters halved

always-fixed


			

Fixed grid at 610px across all browsers and devices. Should always be fixed at the large layout

Component information

Latest stable version:
4.3.3 (3 months, 4 days old)
Status (Learn more):
Active (as of 4.3.3)
Bundle sizes:
12.22KB JavaScript 42.66KB CSS
This version
4.3.3 (3 months, 4 days old)
Support status (Learn more):
Active (as of 4.3.3)
Last indexed
26 Jun 2017 04:15:42 (Build now)
Installable?
OK
Dependencies
sass-mq ^3.1.0 Out of date
Dependents
alphaville-adsalphaville-headeralphaville-marketslive-chatalphaville-marketslive-session-notificationalphaville-uifthelp-wp-templaten-barriersn-conceptn-corporate-overlayn-messagesn-sliding-popupn-storylinesn-uin-ui-foundationsnext-beacon-componento-adso-bannero-chato-cookie-messageo-crosswordo-footero-formso-ft-affiliate-ribbono-ft-footero-headero-header--theme-ico-header-serviceso-hierarchical-navo-section-heado-shareo-subs-cardo-tableo-teasero-teaser-collectiono-techdocso-typographywebchat

Contact

To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue

Origami