Katora item is built with latest tools using advance techniques catering the needs of modern day websites. In order to make it 100% useful below are the must have techniques you need to use,

Bootstrap

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library. Bootstrap is an open source toolkit for developing HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive pre-built components, and powerful plugins built on jQuery. With Bootstrap, you can make a user friendly variant of your website as this is very powerful and one of the easiest frameworks for frontend development.

Fontawsome

Fontawesome is a popular and handy toolkit for Icons and being used in Katora to make it more attractive and eye catching. Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

jQuery

For a proper touch of functionality, we have used jQuery in Katora development. It is a fast, compact, and feature-rich JavaScript library. It helps create items like HTML document traversal and manipulation, event handling, animation and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

SASS

No website is considered to be completed without proper styling, keeping this requirement in mind, we used Sass in Katora is the most mature, stable, and powerful professional grade CSS extension language in the world. We have used SASS for creating variable and you can change the color variables of your entire website as per your own accord by just a few clicks.

1. All css files located at css folder.
2. All scss files located at scss folder.

These are the different SCSS files in SCSS folder used for website front-end styling. Use these to customize your theme even further. Katora/scss/

• 1. API
  • a. bootstrap-select.scss - Search Dropdown stylesheet
  • b. jquery.fancybox.scss - Fancybox stylesheet
  • c. slick.scss - Slick carousel core stylesheet
  • d. slick-theme.scss - Slick carousel theme stylesheet
• 3. Layouts
  • - Header
    • a. sticky-header.scss - Sticky header stylesheet
    • b. header-one.scss - HomePage one header stylesheet
    • c. header-two.scss - HomePage two header stylesheet
    • d. header-three.scss - HomePage three header stylesheet
    • e. header-mobile.scss - Responsive header stylesheet
  • - Footer
    • a. footer-one.scss - HomePage one footer stylesheet
    • b. footer-two.scss - HomePage two footer stylesheet
    • c. footer-three.scss - HomePage three footer stylesheet
    • d. footer-mobile.scss - Responsive footer stylesheet
  • - Sidebar
    • a. account-sidebar.scss - My Account pages sidebar stylesheet
    • b. blog-sidebar.scss - Blog pages sidebar stylesheet
    • c. shop-right-bar.scss - ShopPage right sidebar stylesheet
    • d. shop-top-bar.scss - ShopPage top bar stylesheet
• 5. Private
  • a. animation.scss - Include all animation of the website
  • b. base.scss - Inlcude theme core stylesheet
  • c. button.scss - Button stylesheet
  • d. mixin.scss - Color contrast stylesheet
  • e. variables.scss - Include all variables of the website
• 7. rtl.scss - rtl layout stylesheet

  We have handled the rtl style of full website in this theme just in order to create convenience and ease for users.

• 2. Components
  • a. banners.scss - HomePage banner stylesheet
  • b. categories-panel.scss - ShopPage Category stylesheet
  • c. modal.scss - Popups stylesheet
  • d. pagination.scss - ShopPage Pagination stylesheet
  • e. product.scss - Product Layout stylesheet
  • f. range-slider.scss - ShopPage Price Range stylesheet
  • g. revolution-layer-carousel.scss - Revolution custom stylesheet
  • h. slick-carousel.scss - Slick carousel custom stylesheet
• 4. Pages
  • a. 404.scss - 404 page stylesheet
  • b. about-page.scss - Aboutus pages stylesheet
  • c. blog-page.scss - Blog pages stylesheet
  • d. cart-page.scss - Cart pages stylesheet
  • e. checkout.scss - Checkout page stylesheet
  • f. compare.scss - Compare page stylesheet
  • g. contact-page.scss - contactus pages stylesheet
  • h. home-page.scss - Three home pages stylesheet
  • i. login-page.scss - login and signup pages stylesheet
  • j. order-detail.scss - Order detail page stylesheet
  • k. orders.scss - Order page stylesheet
  • l. product-page.scss - Six Product detail pages stylesheet
  • m. profile.scss - Profile page stylesheet
  • n. shipping-address.scss - Add shipping address page stylesheet
  • o. shop-page.scss - Five shop pages stylesheet
  • p. wishlist.scss - Wishlist page stylesheet
• 6. style.scss

  You need to include all SCSS files in the stylesheet just in order to make it errorless and attractive. If you want to add more files, you can do it according to the requirement.

• 8. responsive.scss - Reponsive stylesheet

  Responsive stylesheet is the part of Katora. All the responsive styling has been moved here.

1.Add the RTL version CSS after the default CSS file in the HTML:

Simply apply the “bodyrtl” class on body tag and alignment will go right to left. If you don’t want left to right, remove bodyrtl from body tag.

Always use the fonts of Fontawesome in the Icons as this is the easiest way to choose the best Icons. Other icons can also be used but fontawesome is recommended.

IN Header, we have presented a mega menu option that will work as a sitemap of your whole website and provide a great user experience for the browsing persons. Your customers can easily find the web-pages of their interest and crawl to the objects they are actually looking for. This thing will enhance your CTR, increase the number of sessions and strengthen the audience pool for future endeavours.

We have used Google font 'Rajdhani-Regular', sans-serif font in Katora.
If you want to change fonts family, then go to line 109 in variables.scss files. Moreover the font can be changed by choosing it from Google fonts.

The layout of Katora is full screen by default. If you want to change the layout into Boxed you can apply the class of “boxed” on HTML tag.

The color of theme can also be changed as a pre-built theme in css folder which is available in the themes that will help you in changing color (s) as per your choice. Below are the color options available,

1. Style.css - default style
2. blue.css
3. green.css
4. pink.css
5. red.css
6. yellow.css

We are using 2 Modals in Katora.

1. Subscriber
2. Product quick pop up

1. The main commands are in the file - gulpfile.js
2. To deploy a server - gulp
3. To generate the production version - gulp build

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our Support page

• * Responding to questions or problems regarding the item and its features
• * Fixing bugs and reported issues
• * Providing updates to ensure compatibility with new software versions

• * Customization and installation services
• * Support for third party software and plug-ins

• * Make sure your question is a valid Theme Issue and not a customization request.
• * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
• * Make sure to double check the theme FAQs.
• * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
• * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
• * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
• * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.

You can find the version history (changelog.txt) file on Katora-full.zip folder or you can check changelog on theme sale page.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Changelog

                                    -----------------------------------------------------------------------------------------
                                    Version 1.1 - Jan 25, 2020
                                    -----------------------------------------------------------------------------------------

                                    - With angular and reactjs

                                    -----------------------------------------------------------------------------------------
                                    Version 1.0 - Nov 14, 2019
                                    -----------------------------------------------------------------------------------------

                                    - intial release