• Set Up the Project

    The first step we make when starting a new project is to organise our directory structure and all the files we will use. Luckily, the framework offers us from the start all the minimum needed files in order to use the framework on our new project.

    There are not so much things to do at this step, apart from adding some new files of ours, maybe the views of our project or other things we want to work on after we set up the framework.

    It's a better idea for now to leave the directories and files where they are and just jump onto the next steps of setting up your framework, we will clear up the mess later in the Clear Up the Project section.

    We organise our SCSS files into directories named after their use, of course, which is the logical thing to do if you want to have modular code all the time, easy to add and use.

    Let's now jump to the next step in setting up our framework.

  • Edit Configuration File

    Now we will do all the configurations necessary in order to define custom and unique styles for our project. We have only one file (to not over-complicate this process) separated in three categories, in which we define various values for various options we have available.

    The configuration file is located in the config directory and it's called _config.scss (with underscore prefix because it's a partial file).

    Open up the file in your favorite editor and let's start changing things around to fit our needs.

    The first category in which we are going to make changes is the base category, where we define variables with values for our basic stuff from our project. We will describe each configuration option in part, showing its default value and explain what it does.

    Base Configurations

    This first category of configurations (base) contain the following variables:

    • $documentID: '#myDocument' - this is the ID of the Project's Document (which is the html tag, by default);
    • $documentClass: '.my-document' - this is the class of the Project's Document (which is the html tag, by default);
    • $frameworkID: '#myFramework' - this is the ID of the Project's Framework (which is the body tag, by default);
    • $frameworkClass: '.my-framework' - this is the class of the Project's Framework (which is the body tag, by default);
    • $baseFontSize: 18px - this is the base font size in pixels;
    • $fontSize: 1em - this is the base font size in ems (to have relative font sizes across your project);
    • $fontFamily: 'Nunito', sans-serif - this is the font family used for all the elements across your project;
    • $headersFontFamily: 'Nunito', sans-serif - this is the font family used for the headings elements (h1, h2, h3...);
    • $fontSetting: optimizeLegibility - this is the font setting for the text-rendering CSS property (use 'optimizeLegibility' for better visuals or 'optimizeSpeed' for higher load times);
    • $fontWeight: 200 - this is the default font weight value for the elements with body font family;
    • $thickFontWeight: 700 - this is a thicker font weight value you can use wherever you want;
    • $headerFontWeight: 400 - this is the headings font weight value;
    • $fontStyle: normal - this is the font style value you will use with your fonts;
    • $lineHeight: 1.5 - this is the text line height value, expressed with a ratio of one and a half from your default font size (which is 18px by default);
    • $headersLineHeight: 1.5 - this is the headers line height value, expressed with a ratio of one and a half from your default font size (which is 18px by default);
    • $baseMargin: 0 - this is the base margin value (used for white space value); by default is 0, if you will not use it too often;
    • $basePadding: 0 - this is the base padding value (used for the inside spacing value of elements); by default is 0, if you will not use it too often;
    You can use the document and framework class or ID on other tags than the html or body tags, if you don't want or can't. You will, though, need to remove the html and body tags from your SCSS / CSS rules, because the newly defined wrappers are not anymore html or body tags. These variables are mainly used to increase or decrease specificity over elements when you need to, in order not to use the !important flag and keep the things clear. Colors Configurations

    The second category of configurations (colors) contain the following variables:

    • Main Colors
    • $linkColor: 238,83,31 - this is the link RGB color, used for the anchors on your project;
    • $mainColor: 91,91,106 - this is the main RGB color, used for the entire text of your project;
    • $negativeColor: 255,255,255 - this is the negative RGB color;
    • $blackColor: 0,0,0 - this is the black RGB color;
    • $accentColor: 238,83,31 - this is the accent RGB color, the color with which you will define your color scheme (by default is orange);
    • $buttonColor: 246,72,3 - this is the text RGB color for buttons;
    • $mainBackground: 246,246,246 - this is the RGB color of the main background;
    • Secondary Colors
    • $elementsBackground: 241,241,241 - this is the RGB background color used for UI elements such as boxes;
    • $elementsActionBackground: 246,246,246 - this is the RGB background color used for UI elements when they change their state (such as on hover);
    • $elementsBackground2: 230,230,230 - this is the alternative RGB background color used for UI elements in other states or situations;
    • Other Colors
    • $tipColor: 22,216,161 - this is the RGB color used for tip notifications;
    • $tipBack: 22,216,161 - this is the RGB background color used for tip notifications;
    • $pendingColor: 238,83,31 - this is the RGB color used for pending / warning state / notifications;
    • $pendingBack: 238,83,31 - this is the RGB background color used for pending / warning state / notifications;
    • $successColor: 0,205,172 - this is the RGB color used for success / valid state / notifications;
    • $successBack: 0,205,172 - this is the RGB background color used for success / valid state / notifications;
    • $errorColor: 204,42,65 - this is the RGB color used for error / invalid state / notifications;
    • $errorBack: 204,42,65 - this is the RGB background color used for error / invalid state / notifications;
    • $infoColor: 22,159,216 - this is the RGB color used for info state / notifications;
    • $infoBackg: 22,159,216 - this is the RGB background color used for info state / notifications;
    • $neutralBack: 230,230,230 - this is the RGB background color used neutral (gray) elements;
    • $complementaryColor: 91,91,106 - this is the color scheme RGB complementary color, used in conjuction with your color scheme;

    Keep in mind there are also the HEX values (the same variables names suffixed with the HEX keyword) for all the RGB colors out there in the config file, if you decide you want to support Internet Explorer 8 and lower or older browsers.

    All the provided RGB colors will be converted to HSL color system with the help of the function rgbToHsla, which we will use a lot. CSS3 Properties Configurations

    The third category of configurations (CSS3 properties) contain the following variables and lists:

    Variables
    • Text Shadow
    • $defaultTextShadow: 0 0.1em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.2) - this is the default text shadow property value;
    • $defaultInvertTextShadow: 0 -0.1em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.2) - this is the default inverted text shadow property value;
    • $customInvertTextShadow: 0 0.1em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.35) - this is the custom inverted text shadow property value;
    • Box Shadow
    • $defaultOutsetBoxShadow: 0 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1) - this is the default outset box shadow property value;
    • $customOutsetBoxShadow: 0.0833em 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1) - this is the custom outset box shadow property value;
    • $customOutsetBoxShadow2: 0 0.0833em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1) - this is the custom outset box shadow 2 property value;
    • $defaultInsetBoxShadow: inset 0 0 0.1em rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.5) - this is the default inset box shadow property value;
    • $customInsetBoxShadow: inset 0 0 0.1em rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.5), inset 0.075em 0 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.25) - this is the custom inset box shadow property value;
    • $customInsetBoxShadow2: inset 0 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.025) - this is the custom inset box shadow 2 property value;
    • $customInsetBoxShadow3: inset 0 0 0.5em rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.25) - this is the custom inset box shadow 3 property value;
    • $customInsetBoxShadow4: inset 0 -0.0833em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.1) - this is the custom inset box shadow 4 property value;
    • Border Radius
    • $defaultBorderRadius: 0.25em - this is the default border radius property value;
    • $customBorderRadius: 0.3333em - this is the custom border radius property value;
    • $customBorderRadius2: 1em - this is the custom border radius 2 property value;
    • $customBorderRadius3: 0 0 0.5em 0.5em - this is the custom border radius 3 property value;
    • Transition
    • $defaultTransition: all 0.2s linear - this is the default transition property value;
    • $customTransition: margin 0.1s linear - this is the custom transition property value;
    • $customTransition2: width 0.2s linear - this is the custom transition 2 property value;
    • $customTransition3: background-color 0.2s linear - this is the custom transition 3 property value;
    • $noTransition: none - this is the no transition property value;
    Lists
    • Elements with Text Shadow
    • $defaultTextShadowElements: ".text-shadow" - this is the list with all the elements that will have the default text shadow property value;
    • $defaultInvertTextShadow: "" - this is the list with all the elements that will have the default inverted text shadow property value;
    • $customInvertTextShadowElements: "" - this is the list with all the elements that will have the custom inverted text shadow property value;
    • Elements with Box Shadow
    • $defaultOutsetBoxShadowElements: ".box-shadow", ".box", ".message", ".message-error", ".message-alert", ".message-warning", ".message-info", ".message-ok", ".message-neutral", ".comments", ".fixed", ".timeline .item .content", ".feedback .quote" - this is the list with all the elements that will have the default outset box shadow property value;
    • $customOutsetBoxShadowElements: "uikit-dropdown .menu", ".select .list", ".uk-dropdown" - this is the list with all the elements that will have the custom outset box shadow property value;
    • $defaultInsetBoxShadowElements: ".button", "button" - this is the list with all the elements that will have the default inset box shadow property value;
    • $customInsetBoxShadowElements: "" - this is the list with all the elements that will have the custom inset box shadow property value;
    • $customInsetBoxShadow2Elements: ".input.text", ".input.editable:focus", "input[type='text'], textarea" - this is the list with all the elements that will have the custom inset box shadow 2 property value;
    • $customInsetBoxShadow3Elements: "" - this is the list with all the elements that will have the custom inset box shadow 3 property value;
    • $customInsetBoxShadow4Elements: ".button", "button" - this is the list with all the elements that will have the custom inset box shadow 4 property value;
    • Elements with Border Radius
    • $defaultBorderRadiusElements: ".border-radius", ".border-radius .button", ".border-radius button", ".border-radius .quote", ".border-radius blockquote", ".border-radius .tag", ".border-radius .input.checkbox.custom + label", ".border-radius .input.text", ".border-radius input[type='text'], .border-radius textarea", ".border-radius .comments" - this is the list with all the elements that will have the default border radius property value;
    • $customBorderRadiusElements: ".rounded" - this is the list with all the elements that will have the custom border radius property value;
    • $customBorderRadius2Elements: ".timeline .list .item .dot", ".round" - this is the list with all the elements that will have the custom border radius 2 property value;
    • $customBorderRadius3Elements: ".flyer.border-radius .action" - this is the list with all the elements that will have the custom border radius 3 property value;
    • $customBorderRadius3Elements: ".flyer.border-radius .action" - this is the list with all the elements that will have the custom border radius 3 property value;
    • Elements with Transition
    • $defaultTransitionElements: "body", "a", ".transition", ".featured-outside .list", ".moving", ".moving-left", ".moving-right" - this is the list with all the elements that will have the default transition property value;
    • $customTransitionElements: ".moving", ".moving.right" - this is the list with all the elements that will have the custom transition property value;
    • $customTransition2Elements: ".input.expanding" - this is the list with all the elements that will have the custom transition 2 property value;
    • $customTransition3Elements: ".input.text", ".input.editable:focus", "input[type='text']", "textarea" - this is the list with all the elements that will have the custom transition 3 property value;
    • $noTransitionElements: ".button", "button" - this is the list with all the elements that will not have the transition property value;

    The way how the CSS3 properties will be applied to the delegated elements will be covered in the next section Use CSS3 Properties.

    All these variables and lists are only the predefined ones and are already used extensively across the entire framework, but you can also define your own variables and use them in any style files you want.
  • Apply CSS3 Properties

    Now that we have all the CSS3 properties defined in our config file and elements delegated for each of those properties, we can now apply them into our framework.

    We will first create an empty collection (a list) for each of our CSS3 properties, where we're going to keep all the elements from the config file lists, like this:

    $defaultTextShadowCollection: ();

    Then, we are going to iterate with the @each control directive over the specific list with all the elements with that CSS3 property, and append (insert) each element to our empty collection and precede it with our document ID to raise its specificity, like this:

    $defaultTextShadowCollection: ();
    @each $defaultTextShadowElement in $defaultTextShadowElements {
        $defaultTextShadowCollection: append($defaultTextShadowCollection, unquote('html#{$documentID} #{$defaultTextShadowElement}'), comma);
    }

    Now that we have the collection filled with all the elements that will use that specific CSS3 property (in the example above being the 'default text shadow'), we only have to interpolate the collection values as a CSS rule, containing as a CSS property our specific property added with the @include directive, like this:

    #{$defaultTextShadowCollection} {
        @include text-shadow($defaultTextShadow);
    }

    The CSS resulted from this iteration will be this one:

    /* Text Shadow */
    html#myDocument .text-shadow {
        text-shadow: 0 0.1em 0 hsla(0, 0%, 100%, 0.2);
        -moz-text-shadow: 0 0.1em 0 hsla(0, 0%, 100%, 0.2);
        -webkit-text-shadow: 0 0.1em 0 hsla(0, 0%, 100%, 0.2);
    }

    We only have the text-shadow class because this is the only element in our default text shadow list.

    And we repeat this process for all our available CSS3 properties.

  • Edit Boot Loader

    The boot loader is located in the root directory (styles) of our framework's style files, under the name boot.scss and it contains @import directives for all the modules we want to 'load' when we use the framework.

    Aside from our boilerplate.scss file from the base directory and the custom main.scss file from the root directory, all the framework's modules are included in the boot loader file, just because we can anytime use the framework very well without them.

    The modules we can load in here are from various categories (directories), such as features, layout, helpers, components, and so on.

    Here is the boot.scss file filled with all the available modules that we have at this moment:

    // =========================================================================
    // Partials Import
    // =========================================================================
    
    @import "config/config.scss";
    
    
    /* STYLES MODULES BOOT LOADER */
    
    /* Features */
    @import "features/animations.scss";
    // @import "features/minified/animations.min.scss"; - minified version
    @import "features/responsive.scss";
    // @import "features/minified/responsive.min.scss"; - minified version
    @import "features/rtl.scss";
    // @import "features/minified/rtl.min.scss"; - minified version
    
    /* Layout */
    @import "layout/main.scss";
    // @import "layout/minified/main.min.scss"; - minified version
    
    /* Helpers */
    @import "utils/helpers.scss";
    // @import "utils/minified/helpers.min.scss"; - minified version
    
    /* Components */
    // Import your desired components in here
    
    /* Font Icons */
    @import "vendor/font-awesome.css";
    // @import "vendor/minified/font-awesome.min.css"; - minified version

    You can see in the above code that our boot loader is including modules such as animations, responsive (media queries for framework's components), rtl (Right-To-Left support for our framework), main layout (which is the style for our main layout), helpers (which are the extra helpers we use, apart from those from the boilerplate), components (this place is designated to import your own custom components, all the current components are placed in the boilerplate file), and finally, we include the font icons from Font Awesome.

    This is how we use the boot loader, is that simple!

  • Include Needed Files

    After all this configuration stuff, it's time to check out if we have all our resources in place, lock and loaded and ready to serve us. That place we are talking about is the head tag of our HTML document, since we all know that's the place where we place our external files to be loaded, either if they are CSS files, JS files, fonts, or anything else.

    We will check every included file in part and explain what it does and why we need it.

    Since our framework is minimalistic and very modular, we don't include so many external files, we just include its main files and the related vendor files.

    In our head tag, we organised the files we include into various sections such as fonts, main styles, plugins styles, vendor scripts and plugins scripts. The plugins styles and plugins script sections are empty right now because we use no plugins at the moment, except from a nice library called UIkit, which is not considered really a plugin.

    Now let's explain every file included in each of these section:

    • fonts - in this section we load the default fonts we use on our framework, directly from the Google Font APIs or loaded into our framework; just keep the one method that you like the most or remove them completely and add your own fonts;
    • Main Styles
    • CSS reseter - the reseter is a CSS file included with the link tag and its loaded from this path: styles/base/normalize.min.css;
    • framework boilerplate - this is our main CSS file, the heart of our framework and we surely must include it by using a link tag with this path: styles/base/boilerplate.css;
    • boot loader - this is our boot file, where we load all the modules we need and we include it by using a link tag with this path: styles/boot.css;
    • custom main style file - this file is our custom style file where we add our own CSS rules or where we overwrite certain things provided by the framework, and we include it by using a link tag with this path: styles/main.css;
    • Vendor Scripts
    • jQuery - we include jQuery because it's such a popular DOM manipulation library that almost everyone use it and because we use it too to provide JS functionality to some of our components; we use a script tag to include it in our head element and its path is this: js/vendor/jquery-1.11.2.min.js;
    • Modernizr - we use Modernizr to detect the features our browser support and maybe to offer some progressive enhancement, where is the case; we use a script tag to include it in our head element and its path is this: js/vendor/modernizr-2.8.3.min.js;
    Please be aware that we provide the included CSS files unminified, just for the reason you are working on a development environment and make changes frequently. After you finish your work, you can comment these unminified included files and uncomment the provided minified files just above them, after you minify your CSS files with the compressed output style from SASS. Here is an example of how the minified files are placed under your unminified files:
    <link rel="stylesheet" href="styles/base/boilerplate.css"><!-- BOILERPLATE -->
    <!-- <link rel="stylesheet" href="styles/base/minified/main.min.css"> --><!-- minified version -->

    The minified file has the exactly same name as the unminified file, only it's suffixed with .min and it's located in the minified subdirectory from where it's located the unminified file.

    Also be aware that our boot loader (boot.scss), when compiled to CSS, will be filled with all the code from the modules we load into it, so that's the reason we provide a boot.min.css file, as well.

    This are all the files you need to include in order to have your framework functional and ready to go.

  • Call Custom Functions

    We will now see what callings we are going to do in order to give some of our components JS functionality.

    We call from the start of the framework initialisation the functions that we frequently use. There are not that much functions we call, so there is no overload at all.

    The other functions are used with certain components from the Component Manager and we will want to call them only when we need them. They are commented in the main.js file from the js directory.

    So basically, when you decide to use a component that comes with JS functionality, we just uncomment its calling line, place it at the end of our body tag, in the execution area of JS code we have in there, and we're ready to use it. Here is an example of how to call a function you need for a specific component, let's say we want to use the processing button from Component Manager and we call its related JS function like this:

    <!-- Calling of needed JS Functions / Plugins -->
    <script type="text/javascript">
        $(document).ready(function() {
            // jQuery Calls in here
    
            framework.processing();
        });
    
        // JS Calls in here
    
    </script>

    We call the name of our function (processing) preceded by the name of our framework's object (framework) and separated by a dot (.), because that's how we call methods from an object.

    The Component Manager is designed to show you what components are using JS functionality and what function(s) they use exactly, so you know what function you have to call in order to enable its functionality.

    We approach this method of calling JS functions in order to not overload our framework and call all the functions we have available, it's better to call these functions only when you use a component that requires the JS functionality from some of these methods (functions).

  • Add Vendor Modules

    The two vendor modules the framework support at this moment are Bootstrap and UIkit.

    Use Bootstrap

    As probably most of you already know, Bootstrap is the popular framework from Twitter that offers a lot of useful stuff to start working on your web project, but in my opinion is having way too many things and is not that clear and concise as I would like a framework to be. That's one of the main reasons I decided to create this framework, to offer a minimalistic, clear, concise, modular, but powerful and competitive framework you can use on your daily projects with ease, and that have a small learning curve.

    After some thoughts, I decided that I can integrate the Bootstrap framework into this framework for those who want to make use of it or really need some of its components.

    In order to do this, we must first include the custom* CSS files from Bootstrap and after this, we must create some wrappers that will hold all the Bootstrap-related code.

    We say custom files because we included all the CSS rules from Bootstrap under some wrappers in .scss files, in order to encapsulate them and not having problems with our framework.

    Let's include the needed files we were talking about, by putting the JS file in the vendor scripts section of our head tag, like this:

    <script src="js/bootstrap/bootstrap.min.js"></script> <!-- the core JS file -->

    and the CSS files in the boot loader (boot.scss) file, like this:

    /* Bootstrap */
    @import "vendor/bootstrap/bootstrap.css"; // the core CSS file
    // @import "vendor/bootstrap/minified/bootstrap.min.css"; - minified version
    @import "vendor/bootstrap/bootstrap-theme.css"; // the theme CSS file
    // @import "vendor/bootstrap/minified/bootstrap-theme.min.css"; - minified version

    Now that we have the files included, we need to create the wrappers in which we're going to hold our Bootstrap code. We first need to create a big wrapper with the ID bootstrap, which will act somehow like a html tag, and another wrapper with the class bootstrap-wrapper, which will act somehow like a body tag.

    Now we are ready to use anything we want from the Bootstrap framework, without affecting our framework or vice-versa, since the Bootstrap framework is well-encapsulated in its own module.

    Use UIkit

    UIkit is some nice library which offers you a lot of cool components, easy to customise in any way you want. I didn't included all the components from this library, only the ones that I thought they will be the most used on a project.

    You can find all the UIkit components in the Component Manager tagged with the UIKIT keyword in order for you to know which components belong to UIkit and which to our framework.

    Besides its default component, UIkit also offer some nice add-ons and we included in our integration some of them, such as autocomplete, datepicker, pagination, sortable, and others.

    Let's now integrate UIkit and its add-ons into our framework, by firstly include its related files into our head tag.

    These are the JS files we need to include:

    <script src="js/uikit/uikit.min.js"></script> <!-- the core JS file -->
    <script src="js/uikit/addons/NAME-OF-THE-USED-ADDON.min.js"></script> <!-- In here you add the add-on you want to use from UIkit on this particular HTML page -->

    And these are the CSS files we must include in the boot loader (boot.scss) file, like this:

    /* UIkit */
    @import "vendor/uikit/uikit.css"; // the core CSS file
    // @import "vendor/minified/uikit/uikit.min.css"; - minified version
    @import "vendor/uikit/addons/uikit-addons.css"; // the add-ons CSS file
    // @import "vendor/minified/uikit/addons/uikit-addons.min.css"; - minified version
    @import "vendor/uikit/custom-uikit.css"; // our own custom style file where we overwrite things from UIkit
    // @import "vendor/minified/uikit/custom-uikit.min.css"; - minified version

    We implemented this just like we did with Bootstrap, in a special container with a class of uikit-component, in order to keep things clear and modular and encapsulate them, as well. You just need put your markup inside an element with the class uikit-component and you're ready to go! Here's an example:

    <div class="uikit-component">
        <!-- YOUR UIKIT COMPONENT IN HERE -->
    </div>

    The only add-on components that need extra body functions in our main.js file are these: uiKitAnimations, uiKitNotify, uiKitUpload and uiKitScrollspyNav; you can find their bodies in the main.js file, as I already mentioned, and remember to call them the same you call your other JS functions, at the end of your body tag, only on those HTML pages where you use them. The rest of them are working just by including their JS-related files.

    If you need any other component or add-on from UIkit, just go to the official website of the library and see how they are used. There's really no big deal in adding and using them, just follow up their guidelines.

  • Recompile and Watch SCSS Files

    The SCSS files already come precompiled to CSS files, so there's no need to recompile them. The need for recompilation appears when we modify these files or add things to them.

    More than this, we must watch over them with our SASS monitor written in Ruby, by starting it, just like we detailed in the Compiling to SASS subchapter.

    After we make changes to any of our .scss files and save them, the SASS monitor will notice the change and automatically recompile the file into the related CSS file.

    And that's all we need to do to recompile our SCSS files and watch over them as they change.

  • Use a Different Color Scheme

    To obtain this, you must necessarily use the SASS framework, not the CSS side of it, since we need to make changes in color variables and recompile files with these changes included in them.

    In order to do this you must import your predefined partial color scheme file (from the color-schemes/config/ directory) or create yourself a new one by copying one of the color schemes, rename it and change its accent colors, in the desired .scss file after all your already defined color variables (in order to load the new ones from your color scheme file). If you want to change the color scheme of your project into a green one (let's suppose), you will add this in one of your .scss files, after all the color variables:

    // =========================================================================
    // Partials Import
    // =========================================================================
    
    @import "base/core.scss";
    @import "config/config.scss";
    
    
    /* Color Scheme */
    // Import your desired color scheme in here
    @import "color-schemes/config/green";

    By doing this, all the CSS properties related to colors (color, background-color, border-color) that are using the accent color will change their values to the green color scheme accent color values, after the recompilation is done.

    To save this new color scheme, copy all the CSS code that was generated at the recompilation and paste it into a new CSS file created inside the color-schemes directory, naming it with the same name it had before you make the changes, and adding a suffix like -green, like this, for example:

    main-green.css

    Now you saved the color scheme for later use in the color-schemes directory. If you want to use it, exchange it with the filename it had before in the head tag, like this:

    <link rel="stylesheet" href="styles/color-schemes/main-green.css"><!-- MAIN STYLES -->
    <!-- <link rel="stylesheet" href="styles/color-schemes/minified/main-green.min.css"> --><!-- minified version -->

    instead of:

    <link rel="stylesheet" href="styles/main.css"><!-- MAIN STYLES -->
    <!-- <link rel="stylesheet" href="styles/minified/main.min.css"> --><!-- minified version -->

    Just exchange your original file with the one you generated with the new color scheme and you're ready to use your new color scheme.

  • Use the Component Manager

    You can find the Component Manager in the component-manager directory from the framework's root directory.

    In there you will find all the HTML pages of every category of components that are available and coming bundled into our framework.

    You just open one of the components categories from there and you can start browsing in all the other categories very easy. In every category you enter, you will have all the components available to that particular category, examples for those which need to be exemplified in order to be understood easier, and their HTML code attached to them (accessible from clicking on the view the code button).

    Also, the components which use Javascript will also have a notification saying where to find the function they are using.

    The big advantage of the Component Manager is that it offers you in a single place all the components available, well organised in categories, and with their code in place, ready to be copy-pasted into your project and starting to be used.

    After you finished using the Component Manager and you are ready to deploy your project in production, you can easily delete the entire component-manager directory, if you want, because there are no dependencies in there that will affect your project's framework.

    That's all about the Component Manager and how to use it, for now.

  • Clear Up the Project

    After we learned how to configure and work with our framework, and maybe after we finished our own project, it's time to clear up the stuff left behind and not needed anymore.

    The first thing you should do after you finish your project is to create minified versions of your CSS and JS files, as I taught you in the previous subchapter, and after you have these minified files in place, change the paths from your included files in the head tag to match the paths of your minified versions.

    Then, you would like to delete the hidden .sass-cache directory from your styles directory, where SASS keeps all the temporary and old compiled SCSS files, and you simply don't need them to be in there.

    Next in line, after you decided whether or not to use Bootstrap or UIkit, if you do not use them, you can delete all their related files which you can find in the styles/vendor/ and js directories.

    As I already said before, after you finish in using the Component Manager, you can delete its entire directory called component-manager.

    Furthermore, if you're going into production environment, you can also delete all the SCSS files and all the unminified CSS files, and the unminified main.js file. Even more, you can delete all the modules you didn't use already and you're certain you will not use from their directories and remove their @import directives from the boot loader (boot.scss), and then recompile your SCSS files without these modules loaded.

    And lastly, you can remove the documentation directory, as well, where you will find the SassDoc generated documentation, since you won't use it in your project, in most of the cases.

    We are now familiar with how to use the framework and how we can take advantage of its features to create projects in a fast and easy manner.