Getting Started formir - pure css framework

All of logic are based on CSS and <input/> tag elements, thats are required.

<input/> tag has a three very important attribute for Formir, there is: name, id, and for
<input/> is part of form on your website, but we can hide this elements and control all other elements that are directly + or indirectly ~ behind them.

To start working with Formir, you mast know that all elements <input/> ascending one group must have the same name, for example all <input/> in component 'tabs' have to set the same name attribute.
Parts of Formir components have to also set id attribute for each <input/> and have his own <label/> with associated for attribute (the same as id)

Get Formir

Install with npm: npm install --save-dev formir

Install with yarn: yarn install -D formir

Use Formir

javascript module for SASS/SCSS:

import "formir";

for LESS:

import "formir/less";

less/sass compiler with npm:

@import "formir";

Setup Formir

Formir is written on LESS or SCSS. Files are split by core elements, template elements that are an extension to the core, and application files that will be not part of a component of formir but it will be your own styles.

Start with install or copy framework files to own direction. All files are included in file: src/scss/formir.scss or src/less/formir.less you could also use the example of application in file application.less - this is a compilation for this page. All start with this file - you could remove or change the direction, copy from vendor to your direction and modify.

All classes used on this framework is customizable to prevent name collision - src/less/setup/classes.less

All core variables - the most important for all components are store in - src/less/setup/core.less for example number of columns for the grid, or unit for each dimension variables, RWD breaking points.

All other variables for each components are store in - src/less/setup/variables.less.

Mixins are store in direction - src/less/core/mixins/ there is a lot of prefix function.

In the core there is a logic of CSS, we don't recommend changing these files, use variables or templates file mixins (each component's template has owned class mixin to do the job) - but feel free if such a need arises. Remember to copy all files that will be changed from node_modules and change the include direction..

One file to import all componentsless/formir.less #

import setup #

In this section, we import all setup files, classes, core and variables for the core part of the framework and your themes.

      
        // SETUP
@import "setup/classes";
@import "setup/core";
@import "setup/variables";

//// THEME SETUP
@import "themes/default/setup/classes";
@import "themes/default/setup/core";
@import "themes/default/setup/variables";

import core #

In this section we import all components of framework that have core style with logic. If you want you can comment/remove each component that you will not used.

      
        // CORE
//// MIXINS
@import "core/mixins/display";
@import "core/mixins/flex";
@import "core/mixins/functions";


//// COMPONENTS
@import "core/components/form";
@import "core/components/select";
@import "core/components/modal";
@import "core/components/tab";
@import "core/components/accordion";
@import "core/components/tooltip";
@import "core/components/popup";
@import "core/components/button";
@import "core/components/chart";
@import "core/components/description-list";
@import "core/components/menu";
@import "core/components/icons";
@import "core/components/image";
@import "core/components/table";
@import "core/components/section";
@import "core/components/alert";

//// HELPER
@import "core/helpers/align";
@import "core/helpers/display";
@import "core/helpers/items";
@import "core/helpers/toggle";

//// Typography
@import "core/typography/fonts";
@import "core/typography/heading";
@import "core/typography/list";
@import "core/typography/article";
@import "core/typography/color";
@import "core/typography/link";

//// LAYOUTS
@import "core/layouts/clear";
@import "core/layouts/grid";
@import "core/layouts/content";
@import "core/layouts/dimensions"; // width, height, margin, padding etc.
@import "core/layouts/side";
@import "core/layouts/header";
@import "core/layouts/window";

import themes #

In the section, you can import your own changes in style using mixins or other selectors that are part of these files. Try to use the same name of the path.

      
        // THEMES
//// DEFAULT
////// LAYOUTS
@import "themes/default/layouts/side";

////// COMPONETS
@import "themes/default/components/modal";
@import "themes/default/components/tab";
@import "themes/default/components/tooltip";
@import "themes/default/components/chart";
@import "themes/default/components/accordion";
@import "themes/default/components/popup";
@import "themes/default/components/menu";
@import "themes/default/components/select";
@import "themes/default/components/button";
@import "themes/default/components/form";
@import "themes/default/components/table";
@import "themes/default/components/alert";

////// TYPOGRAPHY
@import "themes/default/typography/heading";
@import "themes/default/typography/article";

Remember, you can copy each file from node_modules direction to your own files scope in project. Copy /less/formir.less and other files that you need to change in your project and change path form node_modules to your root path

example of formir.less file #

      
        // SETUP
@import "formir/less/setup/classes";
@import "formir/less/setup/core";
@import "formir/less/setup/variables";


//// THEME SETUP
@import "formir/less/themes/default/setup/classes";
@import "formir/less/themes/default/setup/core";

//// COST TRACKER SETUP

@import "formir/themes/my_project_name/setup/classes";
@import "formir/themes/my_project_name/setup/core";
@import "formir/themes/my_project_name/setup/variables";


// CORE
//// MIXINS
@import "formir/less/core/mixins/display";
@import "formir/less/core/mixins/flex";
@import "formir/less/core/mixins/functions";


//// COMPONENTS
@import "formir/less/core/components/form";
@import "formir/core/components/select";
@import "formir/less/core/components/modal";
@import "formir/core/components/tab";
// @import "formir/less/core/components/accordion";

...

// THEMES
//// DEFAULT
////// LAYOUTS
@import "formir/themes/my_project_name/layouts/side";

////// COMPONETS
@import "formir/themes/my_project_name/components/modal";
@import "formir/themes/my_project_name/components/window";
@import "formir/themes/my_project_name/components/tab";
@import "formir/less/themes/default/components/tooltip";
// @import "formir/less/themes/default/components/chart";
// @import "formir/less/themes/default/components/accordion";

...

Setup your first variables #

core less/formir/setup/core.less #

			
        // Path and dirs
@root-dir: "";  // used for fonts file etc. leave 'formir' as default
@font-dir: "fonts";
@image-dir: "img";

//// Icons path
@font-icon-url-eot: url("@{font-dir}/icons.eot");
@font-icon-url-embedded: url("@{font-dir}/icons.eot");
@font-icon-url-woff2: url("@{font-dir}/icons.woff2");
@font-icon-url-woff: url("@{font-dir}/icons.woff");
@font-icon-url-ttf: url("@{font-dir}/icons.ttf");
@font-icon-url-svg: url("@{font-dir}/icons.svg");

// Base Unit
@base-unit: rem;
@base-steps: 16;
@base-geometric-step: 3;
@colors: body, primary, alternative, link, mute, cancel, success, info, warning, danger, color-1, color-2, color-3;

// Sizes
@sizes: xs, s, m, l, xl, xxl; // can be set for ex. xs, s, m, l etc.. change name of variables for buttons input etc.
@size-xs: 0.6;
@size-s: 0.85;
@size-m: 1.15;
@size-l: 1.5;
@size-xl: 1.75;
@size-xxl: 2;
@input-sizes: s, m, l;

// Layout Unit
@layout-unit: px;
@layout-steps: 8;
@layout-factor: 0.3;
@layout-geometric-step: @base-geometric-step;
@layout-width: @content-max-width;
@layout-height: @content-max-height;

// Rensponsive Web Design

// Break points
@desktop-min-width: 1280px;
@tablet-max-width: 1024px;
@tablet-portrait-max-width: 768px;
@mobile-max-width: 568px;
@mobile-portrait-max-width: 320px;

// Break point on mobile menu
@mobile-menu-max-width: @tablet-portrait-max-width;


// Side break points
@device-width-side-collapse: @tablet-portrait-max-width; // in that device width sidebar will be automatic collapsed, set 0 to off
@device-width-side-hide: @mobile-max-width; // in that device width sidebar (side-hide) will automatic hide, set 0 to off
@device-width-side-show-full: @device-width-side-hide;

@table-mobile-max-width: @tablet-portrait-max-width;

// Z-index
  //// Modals
  @modal-zindex: 10000;

  //// Side
  @side-zindex: 10000;
  //// Tooltips
  @tooltip-zindex: 10000;
  @tooltip-arrow-zindex: 1;
  //// Popups
  @popup-zindex: 10000;
  @popup-arrow-zindex: 1;
  //// Select
  @select-zindex: 10000;

  // Header
  @header-zindex: 10000;


// Content
@content-max-width: unit(1128, @layout-unit);
@content-min-margin: unit(20, @layout-unit);
@content-max-height: unit(600, @layout-unit);