This tutorial will guide you through your first GSS layout design using CodePen. Some CodePen are provided for each step so you can see GSS in action and experiment with it.

Create your project

CodePen will be use in this tutorial to create your first GSS layout:

1 - Create a new CodePen. You can very easily follow the steps using another tool or a simple web page hosted locally.

Wake up the beast

1 - Add the GSS engine script in the HTML section of your CodePen:

<!-- for minified GSS file use: gss.min.js -->
<script src="https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js"></script>

2 - Under the GSS reference script, give GSS the document object on which it will work:

<script type="text/javascript">
  /* you can see what is going on in the engine with console.log(window.engine) */
  window.engine = new GSS(document);
</script>

3 - Add in the JS section in CodePen the following script:

  console.log(window.engine);

Check our live demo.

For more information on adding GSS to your document see our Install Guide

Add some content

Let’s now add some content. We will add an img tag, a h1 tag and a p tag.

1 - Add the following elements in the HTML section of your CodePen:

<img id="cassowaryImg" src="http://gridstylesheets.org/assets/images/Intro/CassowaryBird.png" />
<h1>Hello!</h1>
<p>Could you help me enter my beak in my helmet please?</p>

2 - Add some CSS in the CSS section of your CodePen so the rest of this tutorial feels better.

body {
  background-color: #231028;
  color: #fdf9ad;
  font-family: "museo-sans",sans-serif;
  font-style: normal;
  font-weight: 300;
}

h1 {
  font-family: "adelle", georgia,serif;
  font-style: normal;
  font-weight: 400;
}

You should now have something that looks like this : live demo

Lay it out

Let’s now create the layout using GSS. We want to center the image in the screen. We will position the h1 tag to appear on top of the image with a gap of 30 pixels. We will then position the p tags to be under the image with a gap of 20 pixels.

The horizontal center of the h1 and p tags should be horizontally aligned with the center of the image.

1 - We first need a style block to define our GSS. Add a style tag in the HTML section of your CodePen with the type text/gss:

<style type="text/gss">
</style>

2 - Now let’s center the image in the screen.

<style type="text/gss">
  /* GSS needs the dimension of the image to calculate its position. */
  #cassowaryImg[height] == 250;
  /* The width == the height multiply by the width/height ratio */
  #cassowaryImg[width] == #cassowaryImg[height] * 409/450;
  /* This will position the image to be in the center of the window! That's easy! */
  #cassowaryImg[center] == ::window[center];
</style>

#cassowaryImg[size] will set the width and height of the image. The ID selector #cassowaryImg is used to select the good image element in the page. For more information on selectors see our guide. ::window is one of GSS special pseudo-selectors that represent the visible portion of the page on screen.

3 - We will now align the h1 and p tags using VFL. First we need to inform GSS of the size of the h1 and p tags.

<style type="text/gss">
  #cassowaryImg[height] == 250;
  #cassowaryImg[width] == #cassowaryImg[height] * 409/450;
  #cassowaryImg[center] == ::window[center];

  /* Get the size of the h1 and p tags using their intrinsic size */
  h1[size] == h1[intrinsic-size];
  p[size] == p[intrinsic-size];

  /* VFL to vertically align the elements */
  @v (h1)-30-(#cassowaryImg)-20-(p);
</style>

Intrinsic values allow GSS to know the dimension of an element using the place it occupies in the DOM or the dimension set in CSS. For more information on dimension see our layout guide.

Now @v is a VFL statement. Here we are asking GSS to vertically align the h1, img and p tag placing a gap of 30 pixels between the h1 and the img tags and a gap of 20 pixels between the img and the p tags. Learn more about VFL in our guide.

We are almost done.

4 - Now let’s horizontally align the h1 and p tags with the image.

<style type="text/gss">
  #cassowaryImg[height] == 250;
  #cassowaryImg[width] == #cassowaryImg[height] * 409/450;
  #cassowaryImg[center] == ::window[center];
  h1[size] == h1[intrinsic-size];
  p[size] == p[intrinsic-size];
  @v (h1)-30-(#cassowaryImg)-20-(p);

  /* Horizontally align the h1 and p with the image */
  h1[center-x] == p[center-x] == #cassowaryImg[center-x];
</style>

Bravo!

You just created your first layout using GSS. While this is a very simple layout we hope it gives you a sense of how easy and powerful it is to work with GSS.

Your final result should look like: live demo

We invite you to learn more by reading our documentation.