Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.

Border width, px

Rounding, rem

Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">

Getting started

Configuration files

This section outlines the configuration files available in your project. These files are crucial for managing and customizing the build system, ensuring that the development environment is tailored to meet specific requirements.

Configuration files overview

File name	Description
`build/config.js`	This file serves as the main input file where paths, file names, and other configurations are specified. It defines essential paths such as HTML, SCSS, JS source, and output directories, along with specific configurations for assets like icons and vendor files. If you change the fileNames for JS and CSS or any source folder names (like `scss: 'src/scss'`, `src_js: 'src/js'`) in this configuration, ensure to update the references in the source files accordingly: `src/scss/new-file-name.scss` and `src/js/new-file-name.js`. Additionally, any folder name changes must be reflected in the project structure and related paths. This will ensure the build system functions correctly.
`package.json`	Manages the project's metadata, scripts, and dependencies, serving as a manifest file for Node.js projects. Essential for npm to identify the project's dependencies, scripts, and version info.
`.editorconfig`	Helps maintain consistent coding styles for multiple developers working across various editors and IDEs. It supports a number of properties for setting indent style, charset, and more. For detailed configuration, visit the EditorConfig Documentation.
`.babelrc.js`	Configures Babel to transpile ECMAScript 2015+ into a backwards compatible version of JavaScript, depending on your specified browser targets. Detailed information can be found in the Babel Documentation.
`.browserslistrc`	Determines the range of browser versions your project supports. Influences how Babel, Autoprefixer, and other tools compile and prefix your code. More info can be found on the Browserslist GitHub page.
`.gitignore`	Specifies files and directories that Git should ignore. Helps prevent unneeded files from being committed to your repository.
`.htmlvalidate.json`	Configures HTML validation rules to ensure your markup is both accurate and follows best practices. For a detailed list of configurable options, refer to the HTML Validate Rules.
`.prettierrc`	Defines code formatting rules for Prettier, ensuring consistent style across your project. For a detailed list of configurable options, refer to the Prettier Options Documentation.
`.prettierignore`	Lists the files and directories that Prettier should ignore, similar to .gitignore but specifically for code formatting.
`.stylelintrc.json`	Provides Stylelint configurations to maintain consistent CSS or SCSS syntax in your project. You can explore more about configuring Stylelint and its rules on the Stylelint Rules.
`eslint.config.js`	Sets up ESLint rules to enforce coding styles and catch errors in JavaScript. Detailed documentation is available on ESLint's Configuring Guide.
`manifest.json`	Used to store metadata about your web application as part of its web app manifest, which is crucial for defining how your app appears when installed on a user's device.