Fluxo

Customization #

Learn how to take advantage of Fluxo's past, present and future updates, by creating your own content without changing Fluxo core style.

CSS Override #

Fluxo already included with a CSS file that you can use for your projects customization, the file is called css/customize.css. You can put your own CSS styles on this file to maintain the Fluxo's main styles, so the future updates will not affect your customization.

Copy-paste the stylesheet <link> into your <head> and place it below the css/main.css for overriding.

<link rel="stylesheet" href="css/customize.css">

Once it added, you can then start editing the customize.css file directly on your code editor software. Below are the initial view of customize.css file:

/**
* Customize CSS
*
* @author We Both
* @version 1.0
*
* "You can add your own style below this comment".
*/

JS Override #

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with js/customize.js file.

Copy-paste the <script> and place it below the js/main.js before the closing </body> tag for overriding.

<script src="js/customize.js"></script>

How to Include a Typeface#

With CSS#

  1. Simply replace the font family font-family from <body> in main.css tag with yours. To avoid file loss, overrides of your custom styles you can put the code to your css/customize.css file.

    body {
  font-family: "Sarabun", sans-serif;
}

  2. Add your font stylesheet into the before all other stylesheets. Like:

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Sarabun:300,400,500,600,700">

With Sass#

  1. Use the $base-font-family variable as our typographic base applied to the <body> in sass/partials/_base.scss file to change the current font family variable with yours.

    // Base Font
$base-font-family: 'Sarabun', sans-serif;

  2. Add your font stylesheet into the before all other stylesheets. Like:

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Sarabun:300,400,500,600,700">

Customize Sass #

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster. To learn more about Sass please go to the official documentation.

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with these 2 partial files sass/custom/:

  1. _custom-variables: your variables file for customizing or overriding Fluxo elements/components that have been tied to the core variables.
  2. _custom-styles.scss: create your own styles here.

Compiling Sass

Compiling sass/main.scss file requires some additional tooling:

  • Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
  • Autoprefixer for CSS vendor prefixing
  • Additionaly, for Mac users can use GUI app like CodeKit for dealing with Sass easily.
  • While for Windows users, this tutorial might help you to understand Sass.
Custom files along core CSS files will be generated in to the css/main.css file.

Variable Defaults #

Every Sass variable in Bootstrap 4 and Fluxo includes the !default flag allowing you to override the variable’s default value in your custom Sass without modifying Fluxo's core. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.

At current Fluxo version, you will find the complete list of variables in:

  1. sass/modules/_colors.scss - Set of color variables.
  2. sass/partials/_base.scss - Base variables for typography.

You can learn about overriding Sass variable on their documentation.