Ascension 1.0 - Template Documentation

How to create a new template

If you don't like any of the built-in template, here's how to create a new one using both the basic and advanced methods.

Using the basic workflow

Before you get started, make sure you navigate to the dist/ folder. This is where you'll be creating your new template.

  1. Create a new file called index.html and open it in your code editor of choice.
  2. Paste the following code in (this is your starting block):

    3. 						                    
						                        <!doctype html>
						                        <html lang="en">
						                            <head>
						                                <meta charset="utf-8">
						                                <meta http-equiv="x-ua-compatible" content="ie=edge">
						                                <title>Ascension Landing Page - Landing 1</title>
						                                <meta name="description" content="The page description goes here">
						                                <meta name="author" content="Adi Purdila">
						                                <meta name="viewport" content="width=device-width, initial-scale=1">
						
						                                <!-- Load Google Fonts faster. -->
						                                <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
						
						                                <!-- Main stylesheet. -->
						                                <link rel="stylesheet" href="assets/css/app.min.css">
						                                <!-- Color theme -->
						                                <link rel="stylesheet" href="assets/css/skins/color-scheme-1.min.css">
						
						                                <!-- Font pair. -->
						                                <link rel="stylesheet" href="assets/css/skins/font-pair-1.min.css">
						                            </head>
						                            <body class=" no-js">
						                            
						                                <!-- Add your page content here -->
						                                
						                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
						                                <script>window.jQuery || document.write('<script src="assets/js/cdn-fallback/jquery-3.2.1.min.js" type="text/javascript"><\/script>')</script>
						                                <script src="assets/js/app.min.js"></script>
						                            </body>
						                        </html>
  3. Update the title and meta information to fit your project.
  4. Choose the color scheme and font pair by loading a different stylesheet.
  5. Add your page content by replacing the comment inside the body tag. To get page content, simply copy and paste the HTML code you want from the other pages.

Using the advanced workflow

Before creating a new page, it's recommended you start the Gulp workflow. If you don't know how to do that, check out the dedicated documentation page. Then, here's what you need to do:

  1. Create a new file called index.html inside src/pages/.
  2. Then, paste in your starter block:

    3. 						                    
						                        ---
page-title: Landing 1
page-description: The page description goes here
color-scheme-class: color-scheme-1
font-pair-class: font-pair-1
---
  3. Edit the Dark Matter variables to reflect the page title, description, chosen color scheme and font pair.
  4. Add the page content by pasting HTML code from the other pages or by loading partials. HTML code can be used alongside partial imports.