Jednotka documentation

What do you need to know?

Jednotka 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).


Show changelog

Getting started

Files

What files I need to load to get it working?

Stylesheets:

JavaScripts:

Optional JavaScripts:
(these JavaScripts are optional; loading is based on your needs)

What is included in main files?

Main stylesheet contains:

Main JavaScript contains:

  • All proprietary plugins initializations

HTML templates

Main HTML template

Body

Header & Navigation

Single menu item

Dropdown menu item

Multilevel dropdown menu item

Without title

With title

With title and breadcrumb

With title and directional arrows

Scroll top

Navigation collapsed on phone

Main navigation in header is collapsed by default on mobile screens. In this case you will need to do:

  • Load bootstrap.min.css in your stylesheets section.
  • Set navbar-collapsed-sm class on navigation structure as you can see below.

Navigation collapsed on tablet

Main navigation in header is collapsed by default on mobile screens. If you would like to have collapsed navigation on tablet screen, you will need to do:

  • Load bootstrap_01.min.css in your stylesheets section.
  • Set navbar-collapsed-md class on navigation structure as you can see below.

Sass & Compass

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

How can I benefit from Compass & SASS?

Jednotka 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 Jednotka template are you going to use, for example:

All files

All Jednotka files + your stylesheets

How to compile my custom build?

It"s pretty simple - just open your terminal and go to 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 Jednotka 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 body background will be black.

Utilities

Colors

Coloring classes

You can use these useful classes for coloring your content:

Text color

text-contrast, text-white, text-black, text-contrast, text-dark, text-medium, text-light, text-medium-light, text-very-light, text-primary, text-success, text-warning, text-danger, text-info.

Background color

contrast-bg, white-bg, black-bg, contrast-bg, dark-bg, medium-bg, light-bg, medium-light-bg, very-light-bg, primary-bg, success-bg, warning-bg, danger-bg, info-bg.

Border color

contrast-border, white-border, black-border, contrast-border, dark-border, medium-border, light-border, medium-light-border, very-light-border, primary-border, success-border, warning-border, danger-border, info-border.

Label

label-contrast, label-white, label-black, label-contrast, label-dark, label-medium, label-light, label-medium-light, label-very-light, label-primary, label-success, label-warning, label-danger, label-info.

Badge color

badge-contrast, badge-white, badge-black, badge-contrast, badge-dark, badge-medium, badge-light, badge-medium-light, badge-very-light, badge-primary, badge-success, badge-warning, badge-danger, badge-info.

Paddings & Margins

You can combine these multiple classes for controling paddings and margins.

Example:

.mg-lg Will set margin: 40px;

.mg-b Will set margin-bottom: 20px;

.pd-t-xso-md Will set padding-top: 30px; only for small screens.

.no-pd-b Will set padding-bottom: 0 !important; only for small screens.

Sides

-t (top), -r (right), -b (bottom). -l (left),

Sizes

-lg (will set: 40px), -md (will set: 30px), - (will set: 20px), -sm (will set: 10px), -xs (will set: 5px).

Small screens only

-xso

Canceling

.no-

Layouts

Boxed layout

Add .boxed class to <body> tag.

Components

Panels

Bordered

Lorem ipsum

Image

Big

Big circle

Circle

Pricing tables

Circle

Title

$ Price

period

  • Item
Button

Solid

Title

$ Price

period

  • Item
Button

Text boxes

Basic

Lorem ipsum dolor sit amet

Title

Content

Read more

Praesent vitae adipiscing nunc

Title

Content

Read more

Title above content

Carousels

JavaScript plugin Flexslider used.

It"s also good idea to set height on carousel items. This height depends on your content, so if default values are not good enough for your content then customize them.

How to set background image

If you would like to make transition between images in your carousel just create simple CSS class to set background-image and add this class to carousel item.

Example
.sea class will set carousel background-image to sea image.

Example CSS:

Example HTML:

Blur

You can see this carousel in Home 1.

Contrast

You can see this carousel in Home 2.

Image

You can see this carousel in Home 3.

Disabling loading symbol

Just add .fade-loading class to carousel definition.

Combining arrows and pagination

If you like directional arrows from Blur carousel, and pagination from Contrast carousel you can combine them:

  • .carousel-blur-arrows
  • .carousel-contrast-arrows
  • .carousel-image-arrows
  • .carousel-blur-pagination
  • .carousel-contrast-pagination
  • .carousel-image-pagination

Portfolio boxes

Profiles

Name

Position

Description

Circle statistics

JavaScript plugin jQuery Knob used.
  • 85%

    Title

Add input to .circle-stat-wrapper, configure color with data-fgColor attribute and set stat value with value attribute.

Small circle statistics with description

  • 85%

    Title

    Lorem ipsum

Icon lists

Icons can be customized with Coloring classes.

Title

Content

Title

Content

Icons

Icons can be customized with Coloring classes.

Circle icons

Rounded icons

Bordered icons

Timeline

  1. 2013

    Time

    Title

    Content

  2. 2012

    Time

    Title

    Content

Comments

Title Staff

Reply

Content

Time + Permalink

Buttons

Classic

Bordered

Add .btn-bordered to your button.

Circle

Add .btn-circle to your button.

Progress bars

Basic

80% Complete
60% Complete
70% Complete
40% Complete
65% Complete

Striped

80% Complete
60% Complete
70% Complete
40% Complete
65% Complete

For striped progress bar just add class .progress-striped

Animated

80% Complete

For animated progress bar just add class .active

Stacked

40% Complete
30% Complete
20% Complete

Colors of progress bars are as follows .progress-bar-contrast , .progress-bar-dark , .progress-bar-medium , .progress-bar-light , .progress-bar-very-light

Default size

80% Complete

Medium size

80% Complete

Large size

80% Complete

Accordions

Bordered

Add .accordion-bordered to .accordion class.

Quotes (Testimonials)

Animations

CSS plugin Animate.CSS used.

Typography

Main title

Dropcaps

M auris feugiat lacus quis aliquet dapibus. Sed venenatis turpis quis neque egestas porttitor. Fusce quistincidunt turpis. Pellentesque felis justo, ornare a enim ac, ornare tincidunt justo. Proin fermentum eleifend mauris.

M auris feugiat lacus quis aliquet dapibus. Sed venenatis turpis quis neque egestas porttitor. Fusce quistincidunt turpis. Pellentesque felis justo, ornare a enim ac, ornare tincidunt justo. Proin fermentum eleifend mauris.

Pages

Portfolio

Filter

JavaScript plugin Isotope used for portfolio filtration.

Browser

Error page

This page is using fullsize image as background. If you are going to support Internet Explorer and your webserver is running Apache, you must add this line to your .htacces file.

Countdown page

This page is using fullsize image as background. If you are going to support Internet Explorer and your webserver is running Apache, you must add this line to your .htacces file.

Set your own datetime for countdown by simple adding data-countdown="2015/09/17 19:50:00" attribute.

Contact

Add .contact-page class to <body> tag.

Map initialization

Place <div id="map-canvas"></div> to your page. And load this JavaScript with your customizations:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
                <script>
                  var initializeMap;
                
                  initializeMap = function() {
                    var iw1, latlng, map, marker, options;
                
                    // customize your latitude and longtitude
                    latlng = new google.maps.LatLng(37.331686, -122.030656);
                
                    options = {
                      scrollwheel: false,
                      zoom: 16,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      mapTypeControl: true
                    };
                
                    map = new google.maps.Map(document.getElementById("map-canvas"), options);
                
                    marker = new google.maps.Marker({
                      position: latlng,
                      map: map
                    });
                
                    // customize text in infobox window
                    iw1 = new google.maps.InfoWindow({
                      content: "Here we are!"
                    });
                
                    return google.maps.event.addListener(marker, "click", function(e) {
                      return iw1.open(map, this);
                    });
                  };
                
                  google.maps.event.addDomListener(window, "load", initializeMap);
                </script>

Wide map

Add .contact-page.contact-page-wide-map class to <body> tag.

Contact form

This functionality requires PHP installed on your server.
Example HTML structure (you can modify HTML structure based on your needs). Validation is done by jQuery Validation plugin. Ajax submit is initialized in jednotka.js file. Server side script for sending emails is in contact.php.

Server side script for sending e-mails. This script is located in contact.php file. Please be sure to check comments in this file.

FAQ

Add .faq-page class to <body> tag.

Changelog

Version 1.5 27. September, 2014

Version 1.4 22. November, 2013

Version 1.3 29. October, 2013

Version 1.2 18. October, 2013

Version 1.1 4. October, 2013

  • Added Sass & Compass files.
  • Added loading symbol to carousels. If you don"t like it, you can disable it.
  • Added rounded and bordered icons.
  • Various minor fixes.
  • Removed multiple apple-touch-icon files. These files are replaced with single apple-touch-icon (152x152px) icon.

Version 1.0 26. September, 2013

  • Initial release