Skip to content

CSS Files, Structure and SASS

CSS Files & Structure

This template use CSS files for the styling.

All CSS files are located within the "css" folder. Here is a list of the CSS files along with their explanations:

  • bootstrap.css for base/framework style
  • swiper.min.css for basic style of the slider
  • plyr.css for video player
  • scrollCue.min.css for scrolling effect style
  • glightbox.min.css for lightbox style
  • phosphor.min.css and fontawesome.min.css for icon style
  • style for this template custom style

This file is separated into sections using comments, like the following example:

/* -------------------------------------------------------------------------- */
/*                             Import google font                             */
/* -------------------------------------------------------------------------- */

some css code here

/* ========================================================================== */
/*                                GLOBAL STYLE                                */
/* ========================================================================== */

some css code here

Sass

This template includes Sass files to facilitate easier customization of the styles.

For more information on how to use the SASS files, please refer to this page.

All Sass files are located within the "scss" folder. Here is a list of the Sass files along with their explanations:

  • The style.scss files are used for the base/framework style eg. style.scss.
  • The modules folder contains the SCSS files for the sections/elements used in this template.
  • about.scss This file contain style for about section
  • _animation.scss This file contain style for the animation section
  • _accordion.scss This file contain style for the accordion elements/section
  • _background.scss This file contain style for the background section
  • _blog.scss This file contain style for the blog section
  • _button_.scss This file contain style for the button elements
  • _contact.scss This file contain style for the contact section
  • _footer.scss This file contain style for the footer section
  • _global.scss This file contain style for the global section
  • _mediaqueries.scss This file contain style for the mediaqueries
  • _mixin.scss This file contain style for the mixin function
  • _nav.scss This file contain style for the navigation section
  • _pricing-table.scss This file contain style for the pricing table element
  • _services.scss This file contain style for the services section
  • _routes.scss This file contain style for the routes section
  • _stats.scss This file contain style for the stats section
  • _slider.scss This file contain style for the slider section
  • _testimonial.scss This file contain style for the testimonial section
  • _team.scss This file contain style for the team section
  • _events.scss This file contain style for the event section
Back to top