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:
2 - Under the GSS reference script, give GSS the document object on which it will work:
3 - Add in the
JS section in CodePen the following script:
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
1 - Add the following elements in the HTML section of your CodePen:
2 - Add some CSS in the CSS section of your CodePen so the rest of this tutorial feels better.
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
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:
2 - Now let’s center the image in the screen.
#cassowaryImg[size] will set the
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
p tags using VFL. First we need to inform GSS of the size of the
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.
@v is a VFL statement. Here we are asking GSS to vertically align the
p tag placing a gap of 30 pixels
h1 and the
img tags and a gap of 20 pixels between the
img and the
p tags. Learn more about VFL in
We are almost done.
4 - Now let’s horizontally align the
p tags with the image.
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.