Crafto

Installation

Follow the below steps to get started with Crafto:

  1. Unzip the downloaded package and open the /html folder to find all the template files. You will need to upload these files and sub folders to your hosting web server using FTP or file manager in order to use it on your website.
  2. Below is the folder/files structure and needs to be uploaded to your website root directory:
    • html/css - Main stylesheet files
    • html/demos - Niche demos related styles
    • html/email-templates - Contact and subscription form PHP files
    • html/fonts - Icon font files
    • html/images - Classic images folder (use only images you need the reset can be safely deleted)
    • html/js - Javascripts folder (Functions, jquery, vendors etc)
    • html/revolution - Revolution slider library files
    • html/sass - Master stylesheet SASS files
    • html/video - Video files
    • html/*.html - All the templates
  3. Install a Localhost server on your PC/Laptop. We recommend using Node/Gulp.js for really streamlining your workflow with Crafto and use the instructions here to get started: SCSS & Gulp.js
  4. Edit the files using a text based editor like VS Code (recommended) or Sublime text.
  5. Finalize the upload package and optionally you can run Gulp Tasks to minify your files.
  6. Upload your files to your servers in the public_html folder (Apache) or /var/www/html Folder (Nginx).

SCSS & Gulp.js

Combining SCSS and Gulp can make your website-building process much smoother. SCSS helps you create neat and flexible styles, while Gulp takes care of repetitive tasks, saving you time and effort. This dynamic duo not only makes your stylesheets easier to manage but also ensures a consistent and scalable development workflow.

Using SCSS

In SCSS, the main key file is sass/style.scss. If you are looking for SCSS Component then you can find it in the sass/ folder.

Using Gulp.js

Before diving into Gulp.js, check if your system already has NodeJS, NPM, and Gulp ready to install.

Once you've got those installed, open your terminal (we suggest using VS Code), navigate to your project folder using the cd /to/project/folder command, and then hit npm install. This will grab all the dependencies listed in your package.json.

Now, you're all set to use some Gulp commands, including:

  • gulp This will compile the sass/style.scss to css/style.min.css and run BrowserSync.

Using Niche Demos

Building websites is a breeze with Crafto, and it gets even simpler with niche demos. These demos are ready-made templates for various types of websites. They need just a little setup and save time, running smoothly on the basic style.css and css/js files. To check out the main pages for these demos, head to the Download Package/html folder. You'll find them with names like demo-{niche}.html template.

For setting up the Niche Demos, you'll want these Folders/Files:

  • css/Folder
  • images/ Folder (Feel free to remove any pictures in this folder that you don't want, but make sure not to get rid of the whole images/ folder.)
  • email-templates/ Contact and subscription form PHP files
  • fonts/ Icon font files
  • revolution/ (But, if the Niche Demos don't use the Revolution slider, feel free to remove the revolution/ folder.)
  • js/ Folder
  • demos/niche/ Folder
  • demo-{niche}.html Niche demo home and inner pages HTML files

Just pick and choose the files you need and delete the rest. Also, just rename the demo-{niche}.html file to index.html. It becomes your default homepage. That's it! Now you can tweak the files to match your website's style.

HTML Structure

Crafto template is based on Bootstrap Framework (http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Below is sample coding structure:

Copy 
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <title>Crafto - The Multipurpose HTML5 Template</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="author" content="ThemeZaa">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos.">
        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.png">
        <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
        <!-- google fonts preconnect -->
        <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <!-- style sheets and font icons -->
        <link rel="stylesheet" href="css/vendors.min.css"/>
        <link rel="stylesheet" href="css/icon.min.css"/>
        <link rel="stylesheet" href="css/style.min.css"/>
        <link rel="stylesheet" href="css/responsive.min.css"/>
        <link rel="stylesheet" href="demos/demo-name/demo-name.css"/>
    </head>
    <body>
        <!-- start header -->
        <header>
            <!-- start navigation -->
            <nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
                ...
            </nav>
            <!-- end navigation -->
        </header>
        <!-- end header -->
        <!-- start section -->
        <section>
            <div class="container">
                ....
            </div>
        </section>                
        <!-- end section -->
        <!-- start footer -->
        <footer>
            <div class="container">
                ....
            </div>    
        </footer>
        <!-- end footer -->
        <!-- javascript libraries -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/vendors.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

Logo Settings

The logo container is in the <nav> tag inside the <header>.

Copy 
<!-- start logo -->
<div class="col-auto me-auto ps-lg-0">
    <a class="navbar-brand" href="#">
        <img src="images/logo-black.png" data-at2x="images/[email protected]" alt="" class="default-logo">
        <img src="images/logo-black.png" data-at2x="images/[email protected]" alt="" class="alt-logo">
        <img src="images/logo-black.png" data-at2x="images/[email protected]" alt="" class="mobile-logo">
    </a>
</div>
<!-- end logo -->

Note Three logo images are in play here: default logo (Seen at top of the page), alternate logo (display on sticky header), and mobile logo. Use .default-logo to set the default image, .alt-logo for the alternate, and .mobile-logo for the mobile version.

Image Settings

Crafto download package does not contain actual images which are there in our online demo due to licensing limitation and this is already mentioned in item description also as per Envato policy. We are using placeholder images instead of real images. You can replace placeholder image URL with your image URL like images/yourimage.jpg and make sure to put the image in /images/ folder.

Copy 
<img src="https://placehold.it/750x500" alt="image alt text">
Change to
<img src="images/yourimage.jpg" alt="image alt text">

Color Schemes

It's easy to change the colours on your website. Simply use this short code to add your colour scheme to the demos/niche/niche.css file:

Copy 
:root {
  --base-color: #2946f3;
  --dark-gray: #232323;
  --very-light-gray: #eceff1;
}

Changing Fonts

Crafto uses 2 fonts: Plus Jakarta Sans & Inter from the Google Fonts Library. You can change the fonts from demos/niche/niche.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an article of self hosted fonts to review. In this case you need to remove below lines and change font names in demos/niche/niche.css file as per your fonts used.

:root {
  --alt-font: "Plus Jakarta Sans", sans-serif;
  --primary-font: "Inter", sans-serif;
}

Using Google Fonts

If you wish to add or change your website fonts. You simply need to set your fonts in the demos/niche/niche.css file using the following code:

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");

Using Self-Hosted Fonts

If you plan to use a self-hosted fonts, use the following code possibly at the top of the demos/niche/niche.css file:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

NoteFor demo, You can please check this in demo-accounting.html page.

Theme Customization

We have included a demo CSS file inside the demos folder, as well as another folder niche called niche.css, so you can better manage your customizations while updating Crafto to the latest version. To add any custom CSS Codes, just add them to the demos/niche/niche.css file.

Copy 
<head>
    <link rel="stylesheet" href="demos/niche/niche.css" type="text/css" />
</head>

JavaScript

Crafto comes with lots of helpful JavaScript plugins to make your website more user-friendly. These plugins add useful features for your website visitors. We built the JavaScript (JS) on a strong foundation using Object functions, making it sturdy and efficient.

You can locate the JS plugin files in the js/ folder.

<script type="text/javascript" src="js/main.js"></script>

NoteMake sure that JS Files are always loaded at the bottom of the Page as in the Default HTML Files.

HTTPs Compatibility

As the internet faces more spam, phishing, and attacks, it's crucial to keep your website secure. Crafto is designed to be a ready-to-go solution for your website, and it's equipped to handle HTTPS without any extra effort from you. All you need to do is install the HTTPS certificates, and your web hosting providers can assist you with that.

Also, make sure that any links for JS, CSS, images, or PHP, whether hosted externally or using an absolute URL, begin with https:// to ensure a secure connection. This way, the information passed through your website stays safe, and private data is not at risk.

Correct Example:

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Wrong Example:

<link href="http://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Website Optimization Tips

Nowadays fast & optimized website is a must, so we would like to present some optimization tips below that can optimize your overall website speed:

Enable gZIP Compression

To decrease the size of data that is being transferred between your server and your visitors, you can enable the gZIP compression for your images, CSS, and JavaScript files. By doing this, the web server will compress (like creating a ZIP file for example) this content before it's transferred over the Internet to your browser. On the other side, your browser decompresses the content before rendering it. This significantly lowers the size of information that's being transferred lowering the loading times of your pages.

The easiest way to enable the gZIP compression for your images, CSS, and JS files is to add these lines to your .htaccess file in the root HTML folder:

Copy 
<!-- ENABLE GZIP COMPRESSION -->
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
<!-- ENABLE GZIP COMPRESSION -->

Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.

Fast Web Hosting Servers

Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & fast hosting service. You can refer to some recommended hosting Services here: http://themeforest.net/get_hosting

Disable ETags

Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file: FileETags none

Note that this rule applies to sites that are on a server farm. If you're using a shared host, you could skip this step, but we recommend that you do it regardless.

Optimize Your Images

Many times, we put many pictures on our websites without trying to make them smaller and better. Just remember, if the picture is big, it takes longer to download. This makes your website slow and not good for users. If your website doesn't load in 3-5 seconds, customers might leave, and this can hurt your sales. So, it's crucial to make your pictures smaller and better before putting them on your website. Below are a few suggestions that could be useful when it comes to enhancing the optimization of images:

  • Resize your Images: Resize your images before putting them on your website. Don't use a big image in a small space—adjust the size to fit correctly.
  • Image Formats: Pick the right file type for your images. Use JPEG for plain backgrounds, PNG for transparent backgrounds, and GIF for animated images on the web.
  • Compressing Images: Compression is essential to reduce image size without sacrificing quality. There are many free tools to help with image optimization.
    For MAC, you can use ImageOptim
    For Windows, consider using Riot for compressing JPEG Images and PNG Gauntlet for PNG Images.

Leverage Browser Caching

Leveraging browser caching means that you can specify for how long your visitors' browsers should cache your images, CSS, JS, and Flash files. However, if any of those resources are set, your server will notify the visitor's browser and the cached content will be replaced with the new one. You can add the lines below to your .htaccess file in order to enable this technique.

Copy 
<!-- LEVERAGE BROWSER CACHING -->
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"
<!-- LEVERAGE BROWSER CACHING -->

CSS & JS Minification

It is recommended to minify the code of your CSS and JS files to reduce the file size and hence improve the loading speed of these files in the browser. There are many tools available online to minify CSS & JS Files. We can recommend below tools for the same but you can use any other tools if you wish.
CSS Minifier
Javascript Minifier

Note If you are using Gulp.js provided in the Crafto package then it will minify CSS and JS files and hence you do not need to use the above tools.