Skip to content

Tips page

Maicon Pinto edited this page Nov 21, 2018 · 7 revisions

Tips for building pages

Before start writing the content of page, we can to start with the header page.

The page header is where you put page attributes too, like title, permalink, color and others.

For example:

---
layout: page
title: Quick start
permalink: start
color: green
---

Analysing the structure of Quick Start Page, for example, you observe that the content of page, can be divided in three sections where we will call:

  • header
  • doc-wrapper
  • promo-block

header

For example:

If use Emmet plugin on your IDE/Editor.

header#header.header>div.container>(div.branding>h1.logo>a[href="/"]>(span.icon_documents_alt.icon[aria-hidden="true"])+(span.text-highlight{Pretty})+(span.text-bold{Docs}))+(ol.breadcrumb>(li.breadcrumb-item>a[href="/"]{Home})+(li.breadcrumb-item.active{Quick Start}))

If you don't have this plugin, you can copy+paste the below code:

<header id="header" class="header">
    <div class="container">
        <div class="branding">
            <h1 class="logo">
                <a href="index.html">
                    <span aria-hidden="true" class="icon_documents_alt icon"></span>
                    <span class="text-highlight">Pretty</span><span class="text-bold">Docs</span>
                </a>
            </h1>
        </div><!--//branding-->
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
            <li class="breadcrumb-item active">Quick Start</li>
        </ol>
    </div><!--//container-->
</header><!--//header-->

The doc-wrapper is more complex, so we can put off for later.

promo-block

So, for example:

If use Emmet plugin on your IDE/Editor.

div#promo-block.promo-block>div.container>div.promo-block-inner>(h3.promo-title.text-center>(i.fa.fa-heart)+(a[href="#URL" target="_blank"]{Are you an ambitious and entrepreneurial developer?}))+(div.row>(div.figure-holder.col-lg-5.col-md-6.col-12>div.figure-holder-inner>(a[href="#URL"]>img.img-fluid[src="assets/images/demo/instance-promo.jpg" alt="Instance Theme"])+(a.mask[href="#URL"]>i.icon.fa.fa-heart.pink))+(div.content-holder.col-lg-7.col-md-6.col-12>div.content-holder-inner>(div.desc>(h4.content-title>strong{Instance - Bootstrap 4 Portfolio Theme for Aspiring Developers})+(p{Check out <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Instance</a> - a Bootstrap personal portfolio theme I created for developers. The UX design is focused on selling a developer’s skills and experience to potential employers or clients, and has <strong class="highlight">all the winning ingredients to get you hired</strong>. It’s not only a HTML site template but also a marketing framework for you to <strong class="highlight">build an impressive online presence with a high conversion rate</strong>.})+(p{If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!}>strong.highlight{[Tip for developers]:})+(a.btn.btn-cta[href="URL" target="_blank"]{View Demo}>i.fa.fa-external-link-alt))+(div.author>a[href="URL"]{Xiaoying Riley})))

If you don't have this plugin, you can copy+paste the below code:

<div id="promo-block" class="promo-block">
    <div class="container">
        <div class="promo-block-inner">
            <h3 class="promo-title text-center">
                <i class="fas fa-heart"></i> 
                <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">
                    Are you an ambitious and entrepreneurial developer?
                </a>
            </h3>
            <div class="row">
                <div class="figure-holder col-lg-5 col-md-6 col-12">
                    <div class="figure-holder-inner">
                        <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">
                            <img class="img-fluid" src="assets/images/demo/instance-promo.jpg" alt="Instance Theme" />
                        </a>
                        <a class="mask" href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/">
                            <i class="icon fa fa-heart pink"></i>
                        </a>                        
                    </div>
                </div><!--//figure-holder-->
                <div class="content-holder col-lg-7 col-md-6 col-12">
                    <div class="content-holder-inner">
                        <div class="desc">
                            <h4 class="content-title">
                                <strong> Instance - Bootstrap 4 Portfolio Theme for Aspiring Developers</strong>
                            </h4>
                            <p>Check out <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Instance</a> - a Bootstrap personal portfolio theme I created for developers. The UX design is focused on selling a developer’s skills and experience to potential employers or clients, and has <strong class="highlight">all the winning ingredients to get you hired</strong>. It’s not only a HTML site template but also a marketing framework for you to <strong class="highlight">build an impressive online presence with a high conversion rate</strong>. </p>
                            <p>
                                <strong class="highlight">[Tip for developers]:</strong> 
                                If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!
                            </p>
                            <a class="btn btn-cta" href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">
                                <i class="fas fa-external-link-alt"></i> 
                                View Demo
                            </a>
                        </div><!--//desc-->
                        <div class="author">
                            <a href="https://themes.3rdwavemedia.com">Xiaoying Riley</a>
                        </div>
                    </div><!--//content-holder-inner-->
                </div><!--//content-holder-->
            </div><!--//row-->
        </div><!--//promo-block-inner-->  
    </div><!--//container-->
</div><!--//promo-block-->

doc-wrapper

The doc-wrapper is more complex, because of this is the last topic. There are some differences about the previous topics. This section has diference ways to write the code. Every section has own template. But every doc-section has a piece of code that is similary.

For example, the doc-wrapper section of every page is wrapped with below code:

div.doc-wrapper>div.container>(div#doc-header.doc-header.text-center>(h1.doc-title>i.icon.fa.fa-paper-plane+{Quick Start})+(div.meta>i.fa.fa-clock+{Last updated: July 18th, 2018}))+(div.doc-body.row>(div.doc-content.col-md-9.col-12.order-1>div.content-inner{#sections})+(div.doc-sidebar.col-md-3.col-12.order-0.d-none.d-md-flex>div#doc-nav.doc-nav>nav#doc-menu.nav.doc-menu.flex-column.sticky{#menus}))

For who don't use Emmet plugin:

<div class="doc-wrapper">
    <div class="container">
        <div id="doc-header" class="doc-header text-center">
            <h1 class="doc-title"><i class="icon fa fa-paper-plane"></i> Quick Start</h1>
            <div class="meta"><i class="far fa-clock"></i> Last updated: July 18th, 2018</div>
        </div><!--//doc-header-->
        <div class="doc-body row">
            <div class="doc-content col-md-9 col-12 order-1">
                <div class="content-inner">
                    #sections
                </div>
            </div>
            <div class="doc-sidebar col-md-3 col-12 order-0 d-none d-md-flex">
                <div id="doc-nav" class="doc-nav">
                    <nav id="doc-menu" class="nav doc-menu flex-column sticky">
                        #menus
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

Where #sections is content of sections, and #menus is the menu items. For an explain of a simple way, we can to start with #sections.

sections

Every page is built on blocks. Each block is represented by section tag. The content these section tag, is the difference that there are between the pages. At this point, there are no much thing that you can to do, to standardize the code. What you can standardize is:

For simpler example:

section#download-section.doc-section>(h2.section-title{Download})+(div.section-block>p{Lorem}+a.btn.btn-green[href="#URL" target="_blank"]>i.fa.fa-download+{Download PrettyDocs})

Without Emmet plugin:

<section id="download-section" class="doc-section">
    <h2 class="section-title">Download</h2>
    <div class="section-block">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec imperdiet turpis. Curabitur aliquet pulvinar ultrices. Etiam at posuere leo. Proin ultrices ex et dapibus feugiat <a href="#">link example</a> aenean purus leo, faucibus at elit vel, aliquet scelerisque dui. Etiam quis elit euismod, imperdiet augue sit amet, imperdiet odio. Aenean sem erat, hendrerit  eu gravida id, dignissim ut ante. Nam consequat porttitor libero euismod congue. 
        </p>
        <a href="https://themes.3rdwavemedia.com" class="btn btn-green" target="_blank"><i class="fas fa-download"></i> Download PrettyDocs</a>
    </div>
</section><!--//doc-section-->

Now that you know the microstructure of section tag, you can start building your own pages. If you more examples, copy+paste below codes, and use to build pages.

To make more sense, will be separate by Pages.

Quick Start

  • Download
  • Installation
  • Code
  • Callouts
  • Tables
  • Buttons
  • Video
  • Icons

Components

  • Dashboards
  • App components
  • UI components

Charts

  • chartjs
  • flot
  • morris
  • inline

FAQs

  • general
  • features
  • pricing
  • support

Showcase

  • premium themes
  • free themes

License & Credits

  • license
  • credits

menus

The #menus is where you build the list of menu items. The simple way, there are only two types of menu items.

The first type, it is more simple:

a.nav-link.scrollto[href="#download-section"]{Download}

Without Emmet plugin:

<a class="nav-link scrollto" href="#download-section">Download</a>

Other type is with submenu items.

a.nav-link.scrollto[href="#installation-section"]{Installation}+nav.doc-sub-menu.nav.flex-column>a.nav-link.scrollto[href="#step1"]{Step One}

Without Emmet plugin:

<a class="nav-link scrollto" href="#installation-section">Installation</a>
<nav class="doc-sub-menu nav flex-column">
    <a class="nav-link scrollto" href="#step1">Step One</a>
    <a class="nav-link scrollto" href="#step2">Step Two</a>
    <a class="nav-link scrollto" href="#step3">Step Three</a>
</nav><!--//nav-->
Clone this wiki locally