Getting Started

See Example Site/Grids

LostGrid rules look like this:

{% highlight css %} div { lost-column: 1/3; } {% endhighlight %}

And the processed CSS looks like this:

{% highlight css %} div { width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); } div:nth-child(1n) { float: left; margin-right: 30px; clear: none; } div:last-child { margin-right: 0; } div:nth-child(3n) { margin-right: 0; float: right; } div:nth-child(3n + 1) { clear: both; } {% endhighlight %}
{% assign gs-docs = site.docs | sort: 'order' %} {% for doc in gs-docs %} {% if doc.type == "getting-started" %}

{{ doc.title }}

{% if doc.beta %} This is currently a feature in beta. Please expect syntax changes. {% endif %} {% if doc.description %}

{{ doc.description }}

{% endif %} {% if doc.code-example %} {{ doc.content }} {% endif %}
Back to Getting Started
{% endif %} {% endfor %}