Publicize docs
HTML Structure
Base HTML
This is the base HTML structure
<header class="header">
<div class="header-bg bg"></div>
<nav class="navbar"></nav>
</header>
<main role="main">
<!-- .section -->
</main>
<div id="footer" class="section">
</div>
Header
You can find navs inside header.
Main Navigation 1 design
This is publicize's default navigation. You can use this navigation design for all pages.
<nav class="navbar navbar-expand navbar-dark p-0">
<div class="container wider flex-grow-1 flex-row flex-wrap align-items-start px-gutter">
<ul class="navbar-nav w-50 w-md-25 align-items-center order-1">
<li id="mainNav" class="nav-item d-flex align-items-center dropdown dropdown--mainmenu allow-hover">
<a class="nav-link dropdown-toggle disable-caret text-uppercase" href="#" id="mainNavDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fas fa-bars" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu rounded-0" role="menu" aria-labelledby="mainNavDropdown">
<li class="dropdown-item d-sm-none">
<a class="navbar-brand " href="../"><img alt="Publicize" src="/img/logo-icon.png"></a>
<a class="mainmenu-close" href="#" id="closeMainNavDropdown" role="button">
<span class="fas fa-times-circle" aria-hidden="true"></span>
</a>
</li>
<li class="dropdown active allow-hover">
<a class="dropdown-item dropdown-toggle disable-caret active allow-hover" tabindex="-1" href="#" id="homeDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
<ul class="dropdown-menu rounded-0" role="menu" aria-labelledby="homeDropdown">
<li><a class="dropdown-item" href="../default/home-1.html">Home 1</a></li>
...
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../default/index.html#home">All Home Templates</a></li>
</ul>
</li>
<li class="dropdown allow-hover">
<a class="dropdown-item dropdown-toggle disable-caret" tabindex="-1" href="#" id="variationsTemplatesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Variations</a>
<div class="dropdown-menu rounded-0" role="menu" aria-labelledby="variationsTemplatesDropdown">
<a class="dropdown-item active" href="../default/home-1.html">Default</a>
...
</div>
</li>
<li><a class="dropdown-item" href="../">About</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-item">
<div class="row">
<a class="dropdown-item col-6" href="posts-by-tag.html">Featured</a>
...
</div>
<!-- /.row -->
</li>
<!-- /.dropdown-item -->
</ul>
</li>
<li class="nav-item d-flex align-items-center w-100">
<form action="#" method="get" class="d-flex w-100">
<input type="text" class="form-control form-control-transparent form-control-search rounded-0" id="inputSearch" placeholder="">
<label for="inputSearch" class="nav-link form-label m-0"><i class="fas fa-search" aria-hidden="true"></i></label>
</form>
</li>
</ul>
<ul class="navbar-nav w-50 w-md-25 align-items-center justify-content-end text-right order-1 order-md-3">
<li class="nav-item d-flex align-items-center">
<a class="nav-link scroll-to" href="#NewsletterForm"><span class="small d-inline-block">Subscribe</span></a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link " href="sign-in.html"><span class="small d-inline-block">Sign In</span></a>
</li>
</ul>
<a href="../default/" class="navbar-brand mx-auto order-2 max-w-md-50 my-2 my-lg-2 my-xl-4"><img alt="Publicize" src="/img/logo.png"></a>
</div>
<!-- /.container wider flex-grow-1 flex-row flex-wrap align-items-start px-gutter-->
</nav>
You can find this navigation navigation design here: Home 1
Main Navigation 2 Design
Another variation for header navigation
<nav class="navbar navbar-expand-md navbar-dark p-0">
<div class="container wider flex-column justify-content-stretch align-items-stretch">
<div class="d-md-flex flex-md-column flex-lg-row py-gutter align-items-center">
<div class="ml--gutter ml-lg-auto order-lg-2 d-none d-md-block">
<div class="banner banner-728x90"><a href="../"><img alt="banner" src="https://via.placeholder.com/728x90?text=728x90+Leaderboard"></a></div>
</div>
<!-- /.ml--gutter ml-lg-auto order-lg-2 d-none d-md-block -->
<a href="../default/" class="navbar-brand mx-md-auto ml-lg-0 my-2 my-lg-2 my-xl-3 order-lg-1"><img alt="Publicize" src="/img/logo.png"></a>
<button class="navbar-toggler float-right mt-3" type="button" data-toggle="collapse" data-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- /.d-md-flex flex-md-column flex-lg-row py-gutter align-items-center -->
</div>
<!-- /.container wider flex-column justify-content-stretch align-items-stretch -->
</nav>
This simple navigation contains logo and also banner. You can find this navigation design here: Home 2
Section Navigation
You can put this navigation belom main navigation (1 and 2)
<nav class="navbar navbar-expand-md navbar-dark p-0 mb-1">
<div class="container wider">
<div class="collapse navbar-collapse p-0" id="mainNavigation">
<ul class="navbar-nav">
<li class="nav-item d-flex align-items-center py-1 dropdown dropdown--mega allow-hover">
<a class="nav-link dropdown-toggle disable-caret text-uppercase py-2 active" href="#" id="nav-item-default" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Default
</a>
<div class="dropdown-menu rounded-0 py-0" aria-labelledby="nav-item-default">
<div class="container wider">
<div class="row">
<div class="col-2 py-4">
<div class="col-bg bg bg-gray-200 bg-pull-left"></div>
<div class="nav flex-column position-relative" id="nav-item-default-Tabs" role="tablist" aria-orientation="vertical">
<a class="dropdown-item allow-hover px-0 py-1 active text-capitalize" id="nav-item-default-home-Tab" data-toggle="list" href="#nav-item-default-home-TabPane" role="tab" aria-controls="nav-item-default-home-TabPane" aria-selected="true">home</a>
{ more tabs goes heare }
</div>
</div>
<!-- /.col-2 py-4 -->
<div class="col-10 py-4">
<div class="tab-content" id="nav-item-default-TabContent">
<div id="nav-item-default-home-TabPane" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-item-default-home-Tab">
<div id="default-home-1-Carousel" class="section carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row posts">
{ post summary goes here }
</div>
<!-- /.row posts -->
</div>
<!-- /.carousel-item -->
{ more carousel item goes here }
</div>
<!-- /.carousel-inner -->
<a class="carousel-control-prev" href="#default-home-7-Carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#default-home-7-Carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /#default-home-7-carousel -->
</div>
<!-- /.tab-pane fade show show active -->
{ more tab pane goes here }
</div>
<!-- /.tab-content -->
</div>
<!-- /.col-10 py-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container wider -->
</div>
<!-- /.dropdown-menu rounded-0 -->
</li>
<!-- /.nav-item d-flex align-items-center py-1 dropdown dropdown--mega allow-hover -->
<li class="nav-item d-flex align-items-center py-1 dropdown allow-hover">
<a class="nav-link dropdown-toggle disable-caret text-uppercase py-2" href="#" id="nav-item-variations" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Variations
</a>
<div class="dropdown-menu rounded-0" aria-labelledby="nav-item-variations">
<a class="dropdown-item active" href="../default/home-2.html">Default</a>
<a class="dropdown-item" href="../default-narrow/home-2.html">Narrow</a>
<a class="dropdown-item" href="../default-light/home-2.html">Light</a>
<a class="dropdown-item" href="../default-dark/home-2.html">Dark</a>
</div>
</li>
<!-- /.nav-item d-flex align-items-center py-1 dropdown allow-hover -->
<li class="nav-item py-1"><a href="home-3.html" class="nav-link text-uppercase py-2">Next</a></li>
</ul>
</div>
</div>
<!-- /#mainNavigation.collapse navbar-collapse divider divider-top p-0 -->
</div>
<!-- /.container wider -->
</nav>
Main
Inside <main> you can find section components. More about section
Footer
Footer basically a section
<div id="footer" class="section section-dark container wider section--footer pb-0">
<div class="row py-gutter-2">
<div class="col-12 col-xl-8">
<div class="row">
<div class="col-6 col-sm-3">
<h6 class="mb-2 text-uppercase text-white">Categories</h6>
<ul class="list-unstyled">
<li><a href="posts-by-category.html" class="">Bussiness</a></li>
...
</ul>
</div>
<!-- /.col-6 col-sm-3 -->
</div>
<!-- /.row -->
</div>
<!-- /.col-12 col-xl-8 -->
<div id="NewsletterForm" class="col-12 col-xl-4">
<h6 class="mb-2 text-uppercase text-white">Newsletter</h6>
<p>Subscribe to our newsletter, and we'll deliver fresh news right to your inbox.</p>
<div class="input-group mb-3">
<input type="text" class="form-control rounded-0" placeholder="What's Your Email" aria-label="What's Your Email" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-light rounded-0" type="button">Subscribe</button>
</div>
</div>
<h6 class="mb-2 text-uppercase text-white">Connect With Us</h6>
<ul class="list-inline">
<li class="list-inline-item"><a href="#" class=" h3"><span class="fab fa-facebook-square"></span></a></li>
...
</ul>
</div>
<!-- /.col-12 col-xl-4 -->
</div>
<!-- /.row -->
<div class="section section-dark with-bg container wider pb-0">
<div class="section-bg bg bg-black o-1 w-window"></div>
<div class="position-relative text-center small my-2">© 2019 Coolorize, Inc. All Rights Reserved</div>
</div>
<!-- /.section-->
</div>