Carat package contains 2 versions of the theme

• Pure HTML
• HTML combined with PHP

Everything is possible to find in our HTML version but it is better to look in the PHP version where everything is divided into the smaller files. HTML files are generated from PHP source codes. Theme is build on Bootstrap.

This documentation will focus on PHP version as HTML plain codes are generated from PHP Files.

Folder structure:

• assets
  • css
  • sass
  • img
  • js
  • fonts
• pages
  

  every page has its representation in this directory. See list of pages here

• templates
  

  some of components like 'grid' and 'row' are often reused, so there is no need to write them again and again, so they are stored in this directory

  • article
    

    contains only blocks which are directly related to the 'blog' or 'magazine' page.

    • block-grid-recommended.php
      

      contains recommended articles structured in a small grid

    • block-grid-reviews.php
      

      contains article-reviews structured in a grid

    • block-grid-video-reviews.php
      

      contains video links structured in a grid

    • block-latest-reviews.php
      

      contains article-reviews structured in a rows

    • block-picked-articles.php
      

      contains article-reviews structured in a rows

    • grid.php
      

      contains structured HTML which represents one single article formatted as a grid item

    • grid-video.php
      

      contains structured HTML which represents one single video formatted as a grid item

    • row.php
      

      contains structured HTML which represents one single video formatted as a row item

  • car
    

    contains only blocks which are directly related to the 'car dealer' or 'car rental' page.

    • block-best-deals.php
      

      Contains list of cars formatted in a rows

    • block-random-cars.php
      

      Contains list of cars formatted in a rows

    • block-recent-cars.php
      

      Contains carousel block of cars formatted in a grid

    • block-used-cars.php

      Contains list of cars formatted in a small rows

    • grid.php
      

      contains structured HTML which represents one single car formatted as a grid item

    • row.php
      

      contains structured HTML which represents one single car formatted as a row item

    • row-checkout.php
      

      contains structured HTML which represents one single car formatted as a row item used on rental pages.

    • row-small.php
      

      contains structured HTML which represents one single car formatted as a teaser item - used in sidebar

    • teaser.php
  • rental
    

    contains only blocks which are directly related to the 'car rental' page.

    • block-features.php
      

      List of features used on first rental page

    • block-summary.php
      

      Block containing HTML for rental checkout page - summary table

    • block-total.php
      

      Block containing HTML for rental checkout page - total table

  • block-features.php
    

    Block of features - used on multiple pages

  • block-magazine-slider.php
    

    Magazine slider HTML - used on magazine page

  • block-newsletter.php
    

    Block for newsletter signup - used on frontpage

  • block-partners.php
    

    Block containing partners html - used on multiple pages

  • block-partners-with-title.php
    

    Block containing partners html with title- used on multiple pages

  • block-testimonials.php
    

    Client testimonials - used on multiple pages

  • slider.php
    

    Main slider - used on frontpage

  • footer.php
    

    Footer of site - same on every page

  • header.php
    

    Header of site - includes assets like js and css, same on every page

  • navigation.php
    

    Navigation of site - isame on every page

Template use very simple routing system. Router checks for pages in 'pages' directory. If the proper include file is found, it will be displayed. If its not found, router will return 404 status code and display appropriate page.

Note: every path can be suffixed with '.html' but it is not required in order to make router work.

Examples

Route: "/" - Router opens '/pages/' directory and searches by default for file frontpage.php

Route: "/faq" - Router opens '/pages/' directory and searches for file or faq.php

Route: "/page-not-found" - Router opens '/pages/' directory and searches for file named ipage-not-found.php. File will not be found and router will return 404 status code.

All the required assets are included in header.php file - css, js.

The main css files is located in 'assets/css/carat.css'. However this is generated from sass files located in 'assets/scss'.

If you don't have experience with sass and compass you can simply replace your carat.css (This file generated and thus its in minified version) with carat.ext.css - which is nicely structured.