Getting Started
Get started with Folio by following this guide. It will help you quickly and easily understand how to make the most out of our Bootstrap Theme.
Thank you for purchasing the Folio theme! We’re pleased you found what you were looking for. Our goal is to ensure you're always satisfied with your purchase. We hope you will easily create an outstanding website using our theme.
Before proceeding with the theme installation, we recommend following the steps listed in this guide. We have included all the necessary information, guidelines, and details you will need to use the Folio theme effectively.
If you can't find the answer you're looking for, we encourage you to reach out to us through our support portal. Please generate a ticket through our support portal, and you will hear back from us very soon.
Directory structure
Once you have downloaded and extracted the Folio theme package, you will see the following files and folder structure:
-
- docs
- Contains the theme's documentation files for editing and setup.
-
- index.html
- Main documentation file. This is the file you are reading now.
-
- template
- Includes all assets and template files used in the theme.
- assets
- Contains all asset files such as CSS, images, JS, SCSS, and plugins used in the theme.
- css
- Contains the CSS files used in the theme.
-
- images
- Contains all images used in the HTML files.
-
- js
- Contains the plugin initialization files.
-
- scss
- Contains all raw source files used to create the final CSS included in the theme.
-
- vendor
- Contains all plugin files.
-
- index.html
- Contains all HTML files used in the theme.
-
- gulpfile.js
- Contains all the commands.
- package.json
- Lists the dependencies and npm information.
- package-lock.json
- Locks dependencies to specific versions to avoid possible version mismatches.
- README.MD
- Provides additional information about the theme.
What to do after purchase?
1. Check the theme inside out
After extracting the .zip file, review every file and folder to understand the theme thoroughly. If you're confused about any file or folder, refer to the directory structure above to clear your doubts. We recommend reading the entire documentation for a better understanding of the theme. It may take up to 30 minutes, but it's worth it.
2. Install local environment for customization (Optional but highly recommended)
Go to the Gulp section and follow the steps. You can skip this step if you prefer to work with Folio as a static source without Gulp and Sass.
3. Branding
After installing and running Gulp, change your brand colors by following the instructions in the Color scheme section. Change your brand logo by following the instructions in the Logo settings section
4. Customization
Now you can start customizing your website according to your needs.
5. Delete unnecessary files and folders before uploading to live server
After completing your website, delete unnecessary files and folders to reduce the website size. Refer to the list below for the necessary files and folders to keep:
- assets/css: Keep "style.css" (or style-rtl.scss for the RTL version). If you haven't used color.css, you can remove it.
- assets/images: Remove all unnecessary files from this folder
- assets/js: Do not delete this folder.
- assets/scss: If you don't need sourcemaps, you can remove the SCSS folder. Make sure to remove the sourcemap comment from the end of the "style.css" (or style-rtl.scss for the RTL version) file to avoid warnings in the console log.
- assets/vendor: Keep only the vendor folders you have used on your website.
- node_modules: This folder is only needed for the local server. Do not upload it to the live server.
- Docs: You don't need the docs folder for your live website.
6. Test your website
Before going live, thoroughly test your website on different devices and browsers to ensure everything works perfectly. Make sure to check the responsiveness and functionality of all elements. To help with this, refer to the Front-End Checklist. This comprehensive checklist covers all aspects of front-end development, including performance, accessibility, SEO, and more. It ensures your website meets the highest standards.
7. Deploy your website
Once everything is set, deploy your website to your live server. Follow your hosting provider’s instructions for uploading files.