Ascension 1.0 - Template Documentation

Helper classes

Here is the complete list of helper classes that can be applied to elements in order to unlock new customization options.

Compact

The class of .compact will reduce the padding top and bottom.

Code Preview 
						                            
						                                <footer class="section compact dark-bg text-center">
						                                    <p>&copy; Ascension 2017. All rights reserved.</p>
						                                    <p>This demo uses icons made by <a href="http://ionicons.com/" title="Made by Ionicons" target="blank">Ionicons</a>.</p>
						                                </footer> <!-- end .section -->

© Ascension 2017. All rights reserved.

This demo uses icons made by Ionicons.

Flush

The classes of .flush-top and .flush-bottom will remove the top and bottom padding respectively. Best used with sections.

Code Preview 
						                            
						                                <div class="section flush-top flush-bottom">
						                                    Section content.
						                                </div> <!-- end .section -->
Section content.

Shadow

The class of .shadow will add a shadow to an element.

Code Preview 
						                            
						                                <div class="card shadow compact text-center">
						                                    <h5 class="accent">Starter</h5>
						                                    <h2>Free</h2>
						                                    <p><small><em>the most basic plan</em></small></p>
						
						                                    <ul class="vertical-list">
						                                        <li>Goals</li>
						                                        <li>24/7 support</li>
						                                        <li>Mobile apps</li>
						                                        <li>100% money-back guarantee</li>
						                                    </ul>
						
						                                    <a href="#" class="button ghost">Register</a>
						                                </div> <!-- end .card -->
Starter

Free

the most basic plan

  • Goals
  • 24/7 support
  • Mobile apps
  • 100% money-back guarantee
Register

If you want, you can have a stronger shadow by using the additional class of .strong.

Code Preview 
						                            
						                                <div class="card shadow strong compact text-center">
						                                    <h5 class="accent">Starter</h5>
						                                    <h2>Free</h2>
						                                    <p><small><em>the most basic plan</em></small></p>
						
						                                    <ul class="vertical-list">
						                                        <li>Goals</li>
						                                        <li>24/7 support</li>
						                                        <li>Mobile apps</li>
						                                        <li>100% money-back guarantee</li>
						                                    </ul>
						
						                                    <a href="#" class="button ghost">Register</a>
						                                </div> <!-- end .card -->
Starter

Free

the most basic plan

  • Goals
  • 24/7 support
  • Mobile apps
  • 100% money-back guarantee
Register

Round, circle and square

The .round, .circle and .square helper classes are used to control the border radius of an element.

Helper classes

Class Description Code & preview
round Sets the border radius to 5px by default. 
						                            
						                                <img src="assets/img/female-1.jpg" class="round" alt="People">
People
circle Sets the border radius to 50%. 
						                            
						                                <img src="assets/img/female-1.jpg" class="circle" alt="People">
People
square Sets the border radius to 0. 
						                            
						                                <img src="assets/img/female-1.jpg" class="square" alt="People">
People

Alignment classes

Because Ascension is powered by flexbox, you can achieve some pretty advanced alignment by using a few dedicated alignment classes.

Text alignment

Text alignment can be achieved by using the following classes:

Class Description Code & preview
text-left Aligns the text to the left. 
						                            
						                                <div class="wrapper fw text-left">
						                                    <p>The content goes here.</p>
						                                </div> <!-- end .wrapper -->

The content goes here.
text-center Aligns the text to the center. 
						                            
						                                <div class="wrapper fw text-center">
						                                    <p>The content goes here.</p>
						                                </div> <!-- end .wrapper -->

The content goes here.
text-right Aligns the text to the right. 
						                            
						                                <div class="wrapper fw text-right">
						                                    <p>The content goes here.</p>
						                                </div> <!-- end .wrapper -->

The content goes here.

Element alignment

Aligning elements is super easy. The only requirement is that they're placed in a parent that's styled with display: flex. Otherwise, they have no context for alignment. The simplest way to achieve this is to use the grid system since the .grid class is automatically set to flex mode.

Class Description Code & preview
center Aligns elements horizontally in the center. In this example, the cell is aligned in the center of the grid container. A solid background was added for clarity. 
						                            
						                                <div class="grid center">
						                                    <div class="cell md-5 light-bg text-center">
						                                        <h4>Award-winning software that makes customers happy.</h4>
						
						                                        <a href="demo-register.html" class="button pill">Start a Free Trial</a>
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->

Award-winning software that makes customers happy.

Start a Free Trial
right Aligns elements horizontally to the right. In this example, the cell is aligned to the right of the grid container. A solid background was added for clarity. 
						                            
						                                <div class="grid right">
						                                    <div class="cell md-5 light-bg text-center">
						                                        <h4>Award-winning software that makes customers happy.</h4>
						
						                                        <a href="demo-register.html" class="button pill">Start a Free Trial</a>
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->

Award-winning software that makes customers happy.

Start a Free Trial
distribute Equally distributes elements horizontally and aligns the first and last ones to the edges of the container. 
						                            
						                                <div class="grid distribute">
						                                    <div class="cell md-3 card shadow">
						                                        The first card.
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-3 card shadow">
						                                        The second card.
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-3 card shadow">
						                                        The third card.
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->
The first card.
The second card.
The third card.
top Aligns elements to the top, vertically. This is actually the default behaviour so using the class of top is optional. 
						                            
						                                <div class="grid gutter top">
						                                    <div class="cell md-3">
						                                        The first cell.
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-3">
						                                        The second cell. This one contains more text and is a lot taller than the first cell. 
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->
The first cell.
The second cell. This one contains more text and is a lot taller than the first cell.
middle Aligns elements to the middle, vertically. 
						                            
						                                <div class="grid gutter middle">
						                                    <div class="cell md-3">
						                                        The first cell.
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-3">
						                                        The second cell. This one contains more text and is a lot taller than the first cell. 
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->
The first cell.
The second cell. This one contains more text and is a lot taller than the first cell.
bottom Aligns elements to the bottom, vertically. 
						                            
						                                <div class="grid gutter bottom">
						                                    <div class="cell md-3">
						                                        The first cell.
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-3">
						                                        The second cell. This one contains more text and is a lot taller than the first cell. 
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->
The first cell.
The second cell. This one contains more text and is a lot taller than the first cell.

Please note that individual cells can overwrite the parent alignment class by specifying a class of their own. Simply use one of the above classes on a cell to align that cell in any way you want.