Flatty documentation

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us .

What do you need to know?

Flatty is built on Twitter Bootstrap framework. If you are not familiar with Twitter Bootstrap, you should check it out because this documentation expects a basic knowledge of this framework.

This documentation will not teach you HTML & CSS, it's just showcase of custom elements used in template. Elements from Bootstrap aren't described (documentation for these elements can be found here).

Getting started

Files

Loading other, than required files (plugins, jQuery UI, etc) is based on your needs.

What files do I need to load to get it working?

Stylesheets:

JavaScripts:

How to get plugin ABC get working?

If you want plugin ABC to get working, you must include all dependent files - check all folders stylesheets/plugins/ABC/, javascripts/plugins/ABC/, images/plugins/ABC/.

HTML templates

Main HTML template

Body

Header

Content

Title & breadcrumb

Sass & Compass

If you are not familiar with Compass or SASS, check these sites:

How can I benefit from Compass & SASS?

Flatty is built using SASS, which is an CSS extension with variables, mixins, selector inheritance, etc. Most of custom work in template can be overriden by usage of variables. All assets in stylesheets are linked with usage of url/path helpers from Compass, so they can be changed very easily.

We recommends compiling stylesheets with Compass - it's easy and awesome!

How to install Compass?

Open your terminal and type:

Compass depends on RubyGems, so you'll need to have Ruby on your machine. If you're on Windows, you can run the Ruby Installer. On Linux, Rails Ready, on OS X you can use RVM.

How to create my custom build?

Create file, for example my_build_name.scss in sass-compass/sass folder.

You'll have to decide what parts of Flatty template are you going to use, for example:

Flatty + Bootstrap (required files only)

Flatty + Bootstrap + some plugins + jQuery UI

All Flatty stylesheets with custom contrast color

How to compile my custom build?

It's pretty simple - just open your terminal and go to sass-compass folder and then type this command:


Compass will compile my_build_name.scss into CSS file - sass-compass/stylesheets/my_build_name.css .

How to change assets paths?

There is a configuration file sass-compass/config.rb which contains basic settings. Complete list of Compass settings can be found here.

This config.rb will compile paths to this: url(../assets/images/example.png)


This config.rb will compile paths to this: url(/assets/images/example.png);


This config.rb will compile paths to this: url(../awesome_compass_setting/assets/images/example.png);

How to change Flatty variables?

All variables can be found in theme/_variables.scss file.

In your custom file my_build_name.scss override some variables.


Contrast color will change to pink and nav background will be black.

Ruby on Rails

Flatty is Ruby on Rails ready! So implementation couldn't be easier :-)

How to install Flatty to my RoR application?

  1. Just go to ruby_on_rails folder and copy assets folder to your_rails_app/app
  2. Copy application.js from ruby_on_rails/pipeline to your_rails_app/app/assets/javascripts
  3. Copy application.scss from ruby_on_rails/pipeline to your_rails_app/app/assets/stylesheets
  4. Add compass-rails gem to your Gemfile. gem "compass-rails", "~> 3.0.2"
  5. You're done!

Custom application.js & application.scss

Flatty is delivered with application.js & application.scss files. These files are loading all Flatty files (these asset pipeline files are just examples). So you can create your own build as described above in Sass & Compass section.

But you probably know that stuff :-)

Forms

Form styles

Example form

Striped form

Vertical form

Components

Select 2 (Simple and multiple) Documentation

Select2 plugin transforms classic selects to more user friendly. Just add .select2 class to select (simple or multiple).

You can easily add placeholder to multiple select.

Color picker (RGB) Documentation

Just add .colorpicker-rgb class to text input. Color picker will return color in RGB.

You can also use .colorpicker-rgb-horizontal class to make picker horizontal.

Color picker (HEX) Documentation

Just add .colorpicker-hex class to text input. Color picker will return color in HEX.

You can also use .colorpicker-hex-horizontal class to make picker horizontal.

Palette color picker Documentation

This feature needs your JavaScript initialization.

Daterange picker Documentation

This feature needs your JavaScript initialization.

Date picker Documentation

Just add .datepicker class. You can modify the date format using data-format attribute.

Time picker Documentation

Just add .timepicker class. You can modify the date format using data-format attribute.

Datetime picker Documentation

Just add .datetimepicker class. You can modify the date format using data-format attribute.

Masked inputs Documentation

Masked inputs are working via data attributes on inputs. Character a can be any alpha char. Number 9 can be any numeric char.

Autosize textarea Documentation

Just add .autosize class to textarea.

Char counter Documentation

Just add .char-counter class to textarea. Allowed an warning values are passed via data attributes.

Max length Documentation

Just add .char-max-length class to textarea. Lenght limit is passed via maxlength attribute.

Switch buttons Documentation

Password strength Documentation

Just add .pwstrength class to password field. And create div element where you want to display password strength progress bar.

Custom file input Documentation

Just add data-file-input attribute to your file input tag and it will be converted to user friendly button.

Mention Documentation

This feature needs your JavaScript initialization.

WYSIWYG Documentation

This feature needs your JavaScript initialization. Don't forget to take a look at plugin documentation because it's hight customisable.

CKEditor Documentation

Just add .ckeditor class to textarea.

Validations Documentation

Just add .validate-form to form tag. Validations are working via data attributes.

Min length and presence validator
Email an presence validator

Wizard Documentation

UI Features & Widgets

UI Features

Colored accordions

Just add .accorion-blue (or any other defined color) to accordion.

Responsive tabs Documentation

Just add .nav-responsive class to .nav-tabs.

Centered tabs

Just add .nav-tabs-centered class to .nav-tabs.

Simple tabs

Just add .nav-tabs-simple class to .nav-tabs.

Custom alerts, prompts... Documentation

This feature needs your JavaScript initialization.

Alert
Confirm
Prompt

Tooltips

Just add .has-tooltip class to some element. Position of tooltip can be customized via data-placement attribute. Content of tooltip goes to title attribute.

Popovers

Just add .has-popover class to some element. Position of popover can be customized via data-placement attribute. Content of popover goes to data-content attribute and header of popover goes to title attribute.

Notifications Documentation

This feature needs your JavaScript initialization.

Waits for close

Timeago Documentation

Just add .timeago class to element like this:

Drag & Drop nestable list Documentation

Hover dropdown Documentation

Widgets

Quick navigation/link

With content

Statistics

Contrast background
Right aligned text

Boxes

Colored box
Bordered box
Collapsed box
Scrollable box

Class .scrollable will transform box content to scrollable area. You can customize it with handy data attributes. data-height is height of scrollable area and data-scrollable-start is place where the scroll will start (top or bottom).

Transparent box
Padded box

There is .box-padding for medium padding and .box-double-padding for big padding on box content.

Small header
Box actions

Each box has two actions in top right corner. One action will remove box and second will collapse box content.

Box toolbox

Components

Address book

This feature needs your JavaScript initialization.

Chat

This feature needs your JavaScript initialization.

For demo functionality see page source code.

Fixed chat

Filetrees Documentation

This feature needs your JavaScript initialization.

Fileupload Documentation

This feature needs your JavaScript initialization.

See plugin documentation for more information and server side settings.

Todo list

This feature needs your JavaScript initialization.

Tables

Basic table

Responsive table

Dynamic data table Documentation

Dynamic data table with filter Documentation

Calendar Documentation

This feature needs your JavaScript initialization.

Calendar in box

Used Javascript

Layouts

Closed navigation

Just add .main-nav-closed class to body tag.

Fixed header

Just add .fixed-header class to body tag and .navbar-fixed-top to header .navbar.

Fixed navigation

Just add .fixed-navigation class to body tag and .main-nav-fixed to nav#main-nav.

Fixed header and navigation

This is combination of fixed header and fixed navigation.

Colors & Themes

Flatty comes with 43 color combinations! There are 3 main colors for content (light, dark and dark blue) and 14 contrast colors.

Content theme

If you want to change content color/theme you must include theme stylesheet.

Light theme

Dark theme

Dark blue theme

Contrast color

You can choose contrast color from: contrast-red contrast-blue contrast-orange contrast-purple contrast-green contrast-muted contrast-fb contrast-dark contrast-pink contrast-grass-green contrast-sea-blue contrast-banana contrast-dark-orange contrast-brown


To change contrast color just add class to body tag.

Utilities

Coloring

You can use these classes to color your code.

.text-contrast .text-red ... (sets color of element)
.contrast-background .red-background ... (sets background-color of element)
.contrast-border .red-border ... (sets border-color of element)

Hovered and striped lists