Gliss is a constraint based layout system for articles. It uses the CSS properties width and max-width instead of media queries to change the layout at different viewport sizes. You can see a demo here, and the related source code.

In your terminal execute:

gem install gliss-layout

In your config.rb file write

require 'gliss'

And finally, import Gliss into your stylesheet

@import 'gliss';

Download the latest release.

Unzip into your project and import Gliss into your stylesheet

@import 'gliss';

First, you are going to want to configure Gliss. Here are the main variables to define your grid:

So far this just provides you with a basic toolset, but if you want to have something more out of the box to work with, set $gliss-modules to true and define these variables as needed:

Gliss is primarily designed to help out with math by providing a few mixins that set the width constraints and alignment on elements.

The primary mixin you will use is grid() and you can pass the small and large constraints to it. If we wanted foo to be 6 columns wide at small sizes and 3 columns wide at the largest sizes then we would write it like this:

foo {
	@include grid(6,3);
}

This will generate the following CSS:

figure._quarter {
	width: 19.25rem;
	max-width: calc(50% + -0.5rem);
}

For alignment, you can choose left, right, or center by using the following mixins:

foo {
	@include grid-center();
	@include grid-left();
	@include grid-right();
}

If you are generating Gliss modules, then use the module definitions you have created with your variables.

First off, the markup should be structure something like this:

<article>
  <figure></figure>
  <div class="text"></div>
  <figure></figure>
  <div class="text"></div>
</article>

Gliss figures have a number of modifiers available. ._half, ._third, and ._quarter set elements to be half width, a quarter width, or one third the width of the page at the max width of the layout. All three degrade to half width. ._left and ._right will float these figures left or right.

._hang is an additional figure modifier that will align the figure with the main text column and also push it flush with the side of the article. You can use ._left and ._right with hanging figures.

This framework is intended as a barebones toolset, not something that will solve all your layout problems for you. It is intended as a beginning to solving some tough problems, not an end and it’s likely that you will find value in reworking components to fit your needs.

Scott Kellum

This is an active project and we encourage contributions. Please review our guidelines and code of conduct before contributing.

Copyright (c) 2015, Vox Media, Inc. All rights reserved.

BSD license

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.