spacegrid

A no-frills responsive grid layout to help you get started on your next project.

View the Project on GitHub JonathanSpeek/spacegrid

Tag Downloads Downloads License

A basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥).

Setup your project

Download either the spacegrid.min.css or spacegrid.css file and link it to your project:

<html>
	<head>
		<!-- for the @media queries to function -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- include the space-grid css -->
		<link rel="stylesheet" href="path_to/space-grid/css/spacegrid.min.css">
	</head>
	...
</html>

Quick Installation

Install with NPM

See documentation

$ npm install spacegrid

Add this to the head of your pages:

<script src="path_to/node_modules/spacegrid/build/bundle.js"></script>

Install with Bower

See documentation

$ bower install spacegrid

Add this to the head of your pages:

<link href="path_to/bower_components/spacegrid/spacegrid.css" rel="stylesheet" type="text/css">

Install using Ruby Gem

See documentation

Add this line to your application’s Gemfile:

gem 'spacegrid'

And then execute:

$ bundle

Or install it yourself as:

$ gem install spacegrid

Add this to your application.css file:

*= require spacegrid

Examples

<!-- full width example -->
<div class="row">
	<div class="space-1">This is 100% width</div>
</div>

<!-- three columns -->
<div class="row">
    <div class="space-3">This is 33.3% width</div>
    <div class="space-3">This is 33.3% width</div>
    <div class="space-3">This is 33.3% width</div>
</div>

<!-- two columns -->
<div class="row">
    <div class="space-2">This is 50% width</div>
    <div class="space-2">This is 50% width</div>
</div>

<!-- four columns -->
<div class="row">
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
    <div class="space-4">This is 25% width</div>
</div>

See it in use here.

With Added Flexibility

Here are a few add-ons:

<!-- these works too :D -->

<div class="row">
    <div class="space-3">This is 33.3% width</div>
    <div class="space-66">This is 66.6% width</div>
</div>

<div class="row">
    <div class="space-75">This is 75% width</div>
    <div class="space-25">This is 25% width</div>
</div>

<div class="row">
    <div class="space-40">This is 40% width</div>
    <div class="space-60">This is 60% width</div>
</div>

Compatibility

CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here’s a compatibility chart.

Contributing to Spacegrid