Logo

Documentation v1.0.0

  • Getting Started
  • Customization
  • SASS
Preview Upgrade to Pro

Overview

Ceres HTML Free uses SASS , the most powerful CSS preprocessor for handling the theme css efficiently. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Components

Components folder in /src/sass/components/contains SASS code that customizes the core Bootstrap components to match the Ceres HTML Free's own design system and custom components. Both Ceres HTML Free and Bootstrap  components are customized in /src/sass/_variables.scss.

Bootstrap Variables

In /src/sass/_variables.scssfile, Ceres HTML Free deeply customizes the standard Bootstrap  components by following the best practices explained in the official documentation.
Custom variables that used to customize Bootstrap components are marked with Custom variablecomment in _variables.scssfile.

Override Variables

If you like to change the Bootstrap theme colors, border radiuses, font family and other variables, we suggest using _variables.custom.scssfile so you keep your own changes separated from future updates to avoid conflicts. All variables to override in this file should be set without the !defaultattribute to prioritize your code change.

Layout

Layout related SASS code is located in /src/sass/layout/folder. This folder contains the layout's markup and SASS variables files as explained in the below table:
File Description
_variables.scss Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.
_layout.scss Defines main layout and its dependencies.
_main.scss Defines base markup and styles.
_header.scss Defines base layout markup and styles.
_footer.scss Defines footer markup and styles.

Compilation

  • Ceres HTML Free compiles layout, components(including the Bootstrap & custom components) into the main bundle: dist/assets/css/style.bundle.css.
  • The custom SASS files are compiled separately into CSS folder: dist/assets/css/custom
  • All 3rd-party plugins css files are bundled into the plugins bundle CSS file and globally included in all pages. dist/assets/plugins/global/plugins.bundle.css.
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
User Management App
Calendar App
Chat App
Customers App
Upgrade to Ceres HTML Pro
Download Ceres HTML Free