Shella HTML

Premium HTML 5 website

  • Created: April 2019.
  • By: MPIthemes - Envato author Profile

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our support forum https://mpithemes.ticksy.com/. Thank you very much!

Shella HTML is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

Here they are, sorted alphabetically:

  1. html-documentation - Documentation for Shella HTML site template
  2. html-master - Main folder for template

HTML folder structure:

  • /html-master
    • /src (Gulp project)
      • /template (All including templates)
      • /css (Template CSS)
      • /scss (Template Sass)
      • /scripts (Template JavaScript)
      • /images (All Images)
    • /dist (HTML result)
      • /styles (Template CSS)
      • /scripts (Template JavaScript)
      • /images (All Images)

CONTENT

Content divided on pages:

  • index.html, index-02.html, index-03.html, index-04.html, index-05.html, index-06.html, index-07.html, index-08.html, index-09.html, index-10.html, index-11.html, index-12.html, index-13.html, index-14.html, index-15.html - Home pages
  • collection.html, collection-2-products-per-row.html, collection-4-products-per-row.html, collection-catalog-mode.html, collection-left-sidebar.html, collection-list.html, collection-list-02.html, collection-list-products.html, collection-look-book.html, collection-look-book-02.html, collection-right-sidebar.html, collection-without-sidebar.html, collection-without-sidebar-with-banner.html - Listing pages
  • product.html, product-with-column.html, product-02.html, product-02-with-column.html, product-03.html, product-04.html, product-06.html - Product info pages
  • gallery.html, gallery-02.html, gallery-03.html, gallery-04.html - Gallery pages
  • blog.html, blog-02.html, blog-03.html, blog-04.html, blog-post.html, blog-post-02.html, blog-post-03.html - Blog content pages
  • other-login.html, other-register.html, other-account.html, other-cart.html, other-wishlist.html, other-compare.html, other-search.html - Customer pages
  • page-about-us.html, page-contact-us.html, page-customer-service.html, page-sizing-guide.html, page-faqs.html, page-privacy-policy.html, page-cookie-policy.html, page-coming-soon.html, page-icons.html, page-style.html, page-404.html - Additional pages

HTML Structure

Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    <!DOCTYPE html>
        <html lang="en">
            ...
        </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

    <div class="row">
        <div class="col-lg-4">...</div>
        <div class="col-lg-8">...</div>
    </div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

    <div class="row">
            <div class="col-lg-4">...</div>
            <div class="col-lg-4 col-lg-offset-2">...</div>
        </div>

If you need more information, please visit this site: https://getbootstrap.com/docs/4.3/layout/grid/

CSS Files

Css file located at dist/styles folder.

  • theme.css - Theme main CSS file.

Sass(Scss) Files

All Sass(Scss) files located at src/scss folder.

  • theme.scss - Theme main sass file.
  • settings/_variables.scss, layuot/global/_variables.scss - Variables sass files.
  • tools/_mixins.scss, layuot/global/_mixin.scss - Mixins sass files.
  • layuot/global/_modifiers.scss - Modifiers sass file.
  • layuot/global/_type.scss - Typography sass file.
  • layuot/global/_rtl.scss - RTL sass file.
  • layuot/modules/ - Blocks sass folder
  • colorize/ - Colorize sass folder
  • animation/ - Animation sass folder
  • font/ - Fonts sass folder

JavaScript

All JS files located at scripts folder.

  • theme.js, module.*.js, section.*.js, modules/ - Theme main JS files and folder.
  • vendor.js, plugin.*.min.js, vendor/ - vendor plugins JS files and folder.

Changing Plugins Options

You can change plugins options in the files in scripts/ folder.

For example, you can change any carousel options:

                    $('[data-js-carousel-slick]').slick({
                        dots: true,
                        dotsClass: 'slick-dots d-flex flex-wrap flex-center list-unstyled mt-7',
                        adaptiveHeight: true,
                        autoplay: true,
                        autoplaySpeed: 5000,
                        infinite: true,
                        slidesToShow: 4,
                        slidesToScroll: 1
                    });

and other.

If you need more information, please visit plugins official sites.

Icons

You can use icons from the SVG icon set 

          ...
            
            ...

Fonts

To change the custom font, please take a look in the layuot/global/_type.scss: 
  /* Google font */
To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

Sources and Credits

We have used the following files as listed.

Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Shella HTML - site template" please go to your downloads section on ThemeForest.net and rate Shella HTML with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Shella HTML as much as I've enjoyed designing this template.

Kind Regards,
MPIthemes