Documentation for the Ascension Landing Page

Lists

Lists are a great way of representing repeating content. Ascension supports the normal, unstyled lists as well as more custom ones.

Default lists

Ascension supports both ordered and unordered lists. You would write the markup as usual, like you see below:

Code	Preview
`<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>`	Item 1 Item 2 Item 3
`<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>`	Item 1 Item 2 Item 3

Custom lists: vertical

The custom vertical lists offer a bit more spacing than the traditional list and more customizability via certain helper classes. Start by adding the class of .vertical-list to an unordered or ordered list. These lists are best used for more complex content, like the one below.

Code Preview

Code	Preview
`<ul class="vertical-list"> <li> <h4 class="heavy">Handlebars templating</h4> <p>Write code really fast with built-in Handlebars.</p> </li> <li> <h4 class="heavy">Flat-file architecture</h4> <p>Because of its optimized file architecture, Ascension is super fast and flexible.</p> </li> <li> <h4 class="heavy">CLI Tools</h4> <p>Ascension features a full suite of command line tools for fast development.</p> </li> </ul>`	Handlebars templating Write code really fast with built-in Handlebars. Flat-file architecture Because of its optimized file architecture, Ascension is super fast and flexible. CLI Tools Ascension features a full suite of command line tools for fast development.

						                            
						                                <ul class="vertical-list">
						                                    <li>
						                                        <h4 class="heavy">Handlebars templating</h4>
						                                        <p>Write code really fast with built-in Handlebars.</p>
						                                    </li>
						                                    <li>
						                                        <h4 class="heavy">Flat-file architecture</h4>
						                                        <p>Because of its optimized file architecture, Ascension is super fast and flexible.</p>
						                                    </li>
						                                    <li>
						                                        <h4 class="heavy">CLI Tools</h4>
						                                        <p>Ascension features a full suite of command line tools for fast development.</p>
						                                    </li>
						                                </ul>

Handlebars templating

Write code really fast with built-in Handlebars.
Flat-file architecture

Because of its optimized file architecture, Ascension is super fast and flexible.
CLI Tools

Ascension features a full suite of command line tools for fast development.

Helper classes

The vertical list can be further customized by using one or more of the available helper classes.

Class	Description	Code & preview
`extra-space`	Increases the top and bottom padding of each list item.	`<ul class="vertical-list extra-space"> <li> <h4 class="heavy">Handlebars templating</h4> <p>Write code really fast with built-in Handlebars.</p> </li> <li> <h4 class="heavy">Flat-file architecture</h4> <p>Because of its optimized file architecture, Ascension is super fast and flexible.</p> </li> <li> <h4 class="heavy">CLI Tools</h4> <p>Ascension features a full suite of command line tools for fast development.</p> </li> </ul>` Handlebars templating Write code really fast with built-in Handlebars. Flat-file architecture Because of its optimized file architecture, Ascension is super fast and flexible. CLI Tools Ascension features a full suite of command line tools for fast development.
`with-border`	Adds a solid border to the bottom of each list item, except the last one.	`<ul class="vertical-list with-border"> <li>Choose which projects you want to track</li> <li>Import todo’s and todo lists</li> <li>Project based filtering</li> <li>Export logs separately for each service</li> <li>Real-time syncronization with the service API</li> </ul>` Choose which projects you want to track Import todo’s and todo lists Project based filtering Export logs separately for each service Real-time syncronization with the service API
`with-icon`	Adds an icon of your choosing to each list item. This requires the use of CSS sprites. Learn more in the dedicated documentation page. Please note that in this example the icon is rendered using the `.icon-check` class. The class of `.with-icon` simply adds the correct padding and styling for the icon.	`<ul class="vertical-list with-icon icon-check with-border"> <li>Web App</li> <li>macOS & Windows Apps</li> <li>iOS & Android Apps</li> <li>watchOS App</li> <li>Maximum flexibility</li> </ul>` Web App macOS & Windows Apps iOS & Android Apps watchOS App Maximum flexibility

Custom lists: horizontal

Horizontal lists can be used to display items horizontally. They use the same markup as all the other lists, just a different starting class: .horizontal-list. Let's take a look at some examples.

Code Preview

Code	Preview
`<ul class="horizontal-list"> <li> <a class="icon small" href="#" title="Twitter"><img src="assets/img/icons/icon-twitter.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="Facebook"><img src="assets/img/icons/icon-facebook.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="LinkedIn"><img src="assets/img/icons/icon-linkedin.svg" alt="Icon"></a> </li> </ul>`

						                            
						                                <ul class="horizontal-list">
						                                    <li>
						                                        <a class="icon small" href="#" title="Twitter"><img src="assets/img/icons/icon-twitter.svg" alt="Icon"></a>
						                                    </li>
						                                    <li>
						                                        <a class="icon small" href="#" title="Facebook"><img src="assets/img/icons/icon-facebook.svg" alt="Icon"></a>
						                                    </li>
						                                    <li>
						                                        <a class="icon small" href="#" title="LinkedIn"><img src="assets/img/icons/icon-linkedin.svg" alt="Icon"></a>
						                                    </li>
						                                </ul>

Helper classes

The horizontal list can be further customized by using one or more of the available helper classes.

Class	Description	Code & preview
`extra-space`	Increases the overall padding of each list item.	`<ul class="horizontal-list extra-space"> <li> <a class="icon small" href="#" title="Twitter"><img src="assets/img/icons/icon-twitter.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="Facebook"><img src="assets/img/icons/icon-facebook.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="LinkedIn"><img src="assets/img/icons/icon-linkedin.svg" alt="Icon"></a> </li> </ul>`
`extra-padding`	Adds additional top and bottom padding to the entire list.	`<ul class="horizontal-list extra-padding"> <li> <a class="icon small" href="#" title="Twitter"><img src="assets/img/icons/icon-twitter.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="Facebook"><img src="assets/img/icons/icon-facebook.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="LinkedIn"><img src="assets/img/icons/icon-linkedin.svg" alt="Icon"></a> </li> </ul>`
`compact`	Reduces each list item's padding by 50%.	`<ul class="horizontal-list compact"> <li> <a class="icon small" href="#" title="Twitter"><img src="assets/img/icons/icon-twitter.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="Facebook"><img src="assets/img/icons/icon-facebook.svg" alt="Icon"></a> </li> <li> <a class="icon small" href="#" title="LinkedIn"><img src="assets/img/icons/icon-linkedin.svg" alt="Icon"></a> </li> </ul>`
`faded`	Reduces the opacity of any any image or icon placed in the list to 25%.	`<ul class="horizontal-list extra-space faded"> <li><img src="assets/img/logos/client-globex-mono.svg" alt="Logo"></li> <li><img src="assets/img/logos/client-hhm-mono.svg" alt="Logo"></i></li> <li><img src="assets/img/logos/client-labirinto-mono.svg" alt="Logo"></li> <li><img src="assets/img/logos/client-wmtw-mono.svg" alt="Logo"></li> <li><img src="assets/img/logos/client-whazapp-mono.svg" alt="Logo"></li> </ul>`