Settings

Input

@gs {                /* default values */
  width:   20.5rem;  /* column width */
  gutter:  1.5rem;   /* gutter width */
  padding: 1.5rem;   /* container padding */
  max:     8;        /* wide screens */
  min:     2;        /* mobile screens */
  align:   center;   /* center or left */
  display: flex;     /* float or flex */
}

Output

/* Does not output anything. */
/* All the media-queries are moved
in the place of this atrule. */

A breakpoint is created for each width multiple, from min to max.

Containers

Input

my-container {
  gs: container;
}

Output

.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 42.5rem) {
  .my-container {
    width: 42.5rem;
  }
}

@media (min-width: 63rem) {
  .my-container {
    width: 63rem;
  }
}

@media (min-width: 83.5rem) {
  .my-container {
    width: 83.5rem;
  }
}

@media (min-width: 104rem) {
  .my-container {
    width: 104rem;
  }
}

@media (min-width: 124.5rem) {
  .my-container {
    width: 124.5rem;
  }
}

@media (min-width: 145rem) {
  .my-container {
    width: 145rem;
  }
}

@media (min-width: 165.5rem) {
  .my-container {
    width: 165.5rem;
  }
}

Media queries

Input

@gs-media 0 { /* move the rules above */
  .my-class {
    …
  }
}

@gs-media 2 {
  .my-class {
    …
  }
}

@gs-media 3 {
  .my-class {
    …
  }
}

Output

.my-class {
  …
}

@media (min-width: 42.5rem) {
  .my-class {
    …
  }
}

@media (min-width: 63rem) {
  .my-class {
    …
  }
}

Example

My styles

Rows

Input

.my-class {
  gs: row;
}

Output

.my-class {
  clear: both;
  margin-right: -1.5rem;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
}

Blocs

Input

.my-class {
  gs: bloc 2;
}

Output

.my-class {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  flex: 0 1 100%;
}

@media (min-width: 42.5rem) {
  .my-class {
    flex: 0 1 39.5rem;
  }
}

Example

bloc 1
bloc 2
bloc 3
bloc 4
bloc 5
bloc 6
bloc 7
bloc 8

Fractions

Input

.my-class {
  gs: fraction 1/3;
}

Output

.my-class {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  flex: 0 1 5.333333333333333rem;
}

Example

1/2
3/2
1/3
2/3
1/4
3/4
5/4

Columns

Input

.my-class {
  gs: columns 3;
}

Output

.my-class {
  column-gap: 1.5rem;
}

@media (min-width: 42.5rem) {
  .my-class {
    column-count: 2;
  }
}

@media (min-width: 63rem) {
  .my-class {
    column-count: 3;
  }
}

Example

(CSS columns break the baseline grid.)

columns 8: this will be up to 8 columns.

Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.

columns 2

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.

columns 3

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.

columns 4

Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.