Barnaul guide

CSS & LESS

Editing style files

We use Less for stylesheets

Style files contents of several stylesheet, imported in one

Main style file is bootstrap.less. All style is imported inside it.

Barnaul stylesheets are contained in two files: barnaul.less and barnaul-animation.less

Less benefits

  • You can change color, font, font size & more in whole design by one click, without nasty searching
  • Style rules are organized hierarchically, without long complex selectors
  • You can use mixins — they allow you to embed all the properties of a class into another class by simply including the class name

You can use LESS without compiling (for development). More info here

Use Less.js only for development!!! It works very slow on mobile devices!

Compiling less

LESS extends CSS with dynamic behavior & compile on server side

How to change page style

For example, you want to change main color:

  • Download oyejorge phpless (last version phpless_1.4.2.2)
  • Put both files less.php and lesscache.php to compile folder
  • Upload theme files to server (PHP 5 or above needed)
  • Open barnaul.less file. Here is the link
  • Find GLOBAL VARIABLES section & COLORS subsection in the file, then find Brand colors
  • Change @brn-primary from #cc1433 to #00ff00 (for example)
  • If you look to page now, you'll see that nothing has changed. Because our design takes style from bootstrap.css file
  • Now we will convert our bootstrap.less to bootstrap.css.
    To do this just click Compile button on top of page or open Compile link & wait for 2-10 seconds
  • When you'll finish styling your page, delete compile folder from server & this help file :)

Localisation

Font

Font "Source Sans Pro" does not contain non-latin characters.

If you use non-latin characters (Russian, Greece), you can change the font to another in less file & in the head section of html code:

  • In barnaul.less find @font-family-sans-serif var & change it
  • in head section of html file find Google font line & change it
  • You can find much font on Google webfont service.
  • I recommend to use Open Sans font family (all widths)

Feedback & Newsletter form messages

There're two kind of validations using in forms. First is client-side validation, second is server-side validation

For example, you want to change (translate) all messages for both forms:

Client-side validation
  • Find Form validation messages line in SCRIPTS section of html file
    Choose your language file messages_ru.js or messages_en.js
    If you don't need russian or english language here, you can edit messages_en.js for your purposes or you can create your own language file
  • Find FEEDBACK FORM section in scripts.js file and find Success message line
  • Find NEWSLETTER FORM section in scripts.js file and find Success message line
Server-side validation
  • Find assets/feedback.php file, open it and find MESSAGE LANGUAGE section
    Choose your language file lang_en.php or lang_ru.php
    If you don't need russian or english language here, you can edit lang_en.php for your purposes or you can create your own language file (this is unifed file for both forms).

Icons

"Batch" icon font

You can use Batch icon font wherever you want. A lovingly designed and crafted suite of 300+ icons for web and user interface design.

Just add to any tag on your page (span for example) .batch class and write icon code inside it

<span class="batch"> &#xf0a4; </span>

Icon code reference you can find here (pdf inside archive). In near future i'll create class-based font.

In PDF ... master.zip/webfont/batch_webfont_reference.pdf you can find icon codes like uniF049. Just convert uniF049 to &#xf049; and use in your design.

For example: and much more

Bootstrap Glyphicons

Also you can use Bootstrap Glyphicons icon webfont. Includes 200 glyphs in font format from the Glyphicon Halflings set.

<span class="glyphicon glyphicon-iconname"></span>

Icon utility classes compatible with Glyphicons:



.glyphicon .glyphicon-search
.icon96 .color-primary

Icon utilites

Icon sizes

You can regulate icon-size. Icon-size 16 px by default

  

  

  

  

  

  

  

Just add to your icon any size class: .icon12 .icon24 .icon32 .icon48 .icon64 .icon96 .icon128

<span class="batch icon48"> &#xf0a4; </span>
Icon colors

Just add class .color-primary or .color-secondary to change icon color to branded colors

  

  

<span class="batch icon48 color-primary"> &#xf0a4; </span>

How to

Control fotorama

Fotorama is a photo or html gallery, which uses in iPhone gallery & Customer reviews

You can control fotorama via data attributes, like data-width="800"

Full data-attributes reference you can find here

port1 port2 port3

Add parallax background

Stellar is a parallax background adder

You can add parallax via data attribute, just add data-stellar-background-ratio="XXX" and data-stellar-vertical-offset="XXX" to your tag with background image

Google map

Adding you address

You can easily add your coordinates & address to Google map

  • Open scripts.js and find GMAP section
  • Write your coordinates here: div: '#gmap', lat: XX.XXXXX, lng: XX.XXXXX
  • To change marker coordinates find gmap.addMarker({ lat: XX.XXXXX, lng: XX.XXXXX piece and fill your data
  • You can add your address to marker in infoWindow section

Feedback

If you have a question about Barnaul support or you need to customize Barnaul, write me a line: yuriybalaka@gmail.com