Misc Pages

The extra pages in Ace's demo such as profile and login, are using common CSS classes and components and have no new elements, except a few additional CSS classes.

Profile

Profile page has a .sticky-nav element:

<div class="sticky-nav">
 <ul class="nav nav-tabs ...">
   ...
 </ul>
</div>

By listening to sticky-change event, when .sticky-nav becomes stuck, a is-stuck class is added to it to change the styling of .nav-tabs a little bit.

For more details see:

• Sticky Nav/Tabs
• views/pages/page-profile/@page-style.css
• views/pages/page-profile/@page-script.js

Inbox

Inbox page has no special elements.
The left side menu is .modal-off-sm modal box. It means, the modal (aside) functionality will be disabled on sm+ screen sizes:

<div id="aside-menu" class="modal fade modal-off-sm ace-aside aside-left">
...
</div>

Search results

Search results page has no special elements.
The left side filters menu is .modal-off-lg modal box. It means, the modal functionality will be disabled on lg+ screen sizes:

<div id="search-filters" class="modal fade modal-off-lg">
...
</div>

Login

As you can see in
views/layouts/login/#index.hbs and views/pages/page-login/#index.hbs
the default login page layout is like this:

<div class="body-container">
  <div class="main-container container bgc-transparent">
    <div class="main-content minh-100 justify-content-center">
      <div class="p-2 p-md-4">
        
        <div class="row" id="row-1">
          <div class="col-12 col-xl-10 offset-xl-1 bgc-white shadow radius-1 overflow-hidden">

            <div class="row" id="row-2">

                <!-- show the intro only in large (lg+) devices -->
                <div class="col-lg-5 d-none d-lg-flex border-r-1 brc-default-l3 px-0">
                  {{> page/intro}}
                </div>


                <div class="col-12 col-lg-7 py-lg-5 bgc-white px-0">
                    <div class="tab-content tab-sliding border-0 p-0" data-swipe="right">
                
                        <div class="tab-pane active show mh-100 px-3 px-lg-0 pb-3" id="id-tab-login">
                            {{> page/login}}
                        </div>


                        <div class="tab-pane mh-100 px-3 px-lg-0 pb-3" id="id-tab-signup" data-swipe-prev="#id-tab-login">
                            {{> page/signup}}
                        </div>


                        <div class="tab-pane mh-100 px-3 px-lg-0 pb-3" id="id-tab-forgot" data-swipe-prev="#id-tab-login">
                            {{> page/forgot}}
                        </div>

                    </div><!-- .tab-content -->
                </div>
                
            </div><!-- /.row -->
            
          </div><!-- /.col -->
        </div><!-- /.row -->

        <div class="d-lg-none my-3 text-white-tp1 text-center">
            <i class="fa fa-leaf text-success-l3 mr-1 text-110"></i> Ace Company © 2020
        </div>

      </div>
    </div><!-- /main -->
  </div><!-- /.main-container -->
</div><!-- /.body-container -->

You can see each section inside views/pages/page-login/#index.hbs folder.

Compact Login

For the second login style (with no intro & welcome message), you should make the following changes:

• Remove the .col element containing intro (#id-col-intro)
• Remove col-lg-7 classname from its sibling (#id-col-main)
• Add .justify-content-center to .row#row-1
  • Remove col-12 col-xl-10 offset-xl-1 classname from its child .col and change it to col-12 col-lg-6 col-xl-5 or something similar
• Optional: Inputs are inside col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3. It's better to remove col-lg-6 offset-lg-3 for bigger input sizes
• Optional: By default there are two title messages. One for desktop and one for mobile. Remove the desktop ones and only use mobile ones because this compact view is similar to mobile view

Fullscreen Login

For the third login style (fullscreen), you should make the following changes:

• Remove container from main-container
• Remove justify-content-center minh-100 from .main-content and add optional padding classes like px-4 px-lg-0
  • Remove padding classes from the child and add d-flex flex-column flex-lg-row flex-grow-1 my-3 m-lg-0
• Add flex-grow-1 to .row#row-1
  • Remove shadow radius-1 col-xl-10 offset-xl-1 etc from its child .col and add d-lg-flex to it
• Add flex-grow-1 to .row#row-2
  • Optionally change column sizing of #id-col-intro and #id-col-main
  • Add d-flex align-items-center justify-content-center to #id-col-main

<div class="body-container">
  <div class="main-container bgc-white">
    <div role="main" class="main-content px-4 px-lg-0">
      <div class="d-flex flex-column flex-lg-row flex-grow-1 my-3 m-lg-0">
        
        <div class="row">

          <div class="d-none d-lg-flex col-lg-4">
            {{> page/intro}}
          </div>

          <div class="col-lg-6 mx-auto d-flex align-items-center justify-content-center py-lg-5 px-0">
            <div class="tab-content tab-sliding border-0 p-0" data-swipe="right">
                ...
            </div>
          </div>

        </div>

      </div>
    </div><!-- /main -->
  </div><!-- /.main-container -->
</div><!-- /.body-container -->

Pricing

Pricing doesn't contain any extra elements or CSS classes.

Error

Error page doesn't contain any extra elements or CSS classes.

Landing Page

Landing pages have no extra elements or special layout except a few CSS classes that you can see in:
views/pages/landing-page-1/@page-style.css

Landing Page 1

An extra .navbar-compact class is defined, to make navbar compact and add a shadow to .navbar-inner.

.navbar-compactis added to .navbar as we scroll down and the optional #scroll-down element goes out of view (using IntersectionObserver).
It gets removed when we scroll back up and the optional #scroll-up element reaches top of window.

See views/pages/landing-page-1/@page-script.js for more info.

Themes
In landing page 1, there are two .navbar and two .page-intro elements. One is for the dark version and the other for light version.

👉 But you should only have one .navbar and one .page-intro.

You can change the theme using the select box.
It changes the theme class of navbar and uses the same navbar theme class for .page-intro

<div id="navbar-dark" class="navbar ... navbar-darkblue">
   ...
</div>

<div id="pageintro-dark" class="page-intro ... navbar-darkblue">
   ....
</div>

Landing Page 2

There are some extra CSS rules to resize/position background images for header and footer according to screen size.
See views/pages/landing-page-2/@page-style.css

Coming Soon

It has .countdown-items and .countdown-item elements used to change their size according to screen size.
See views/pages/coming-soon/@page-style.css