A no-frills responsive grid layout to help you get started on your next project.
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
CONTRIBUTING.md
LICENSE.txt
README.md
_config.yml
spacegrid-logo.svg
spacegrid.css
spacegrid.min.css

README.md

Tag Downloads Downloads License

A basic, responsive grid layout to help you get started on your next project.

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" />

		<!-- 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:

  • 25% width
  • 40% width
  • 60% width
  • 66% width
  • 75% width
<!-- 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.


Ghost Theme

  • For you Ghost bloggers, I've made a theme using Spacegrid

Contributing to Spacegrid