A no-frills responsive grid layout to help you get started on your next project.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added basic usage example page Sep 17, 2016
CONTRIBUTING.md Update CONTRIBUTING.md Feb 20, 2017
LICENSE.txt
README.md
_config.yml Set theme jekyll-theme-minimal Feb 21, 2017
spacegrid-logo.svg
spacegrid.css Addressing issue 14 Feb 23, 2017
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