Documentation on
Startup Framework 2

Using this documentation you'll be able to easily customize your template.

Getting started

In Startup Framework 2 we're using Bootstrap v.4.0.0 with a huge amout of additional classes, that will help you create layout fast and minimalize using css styles.

Change Fonts

We use Google Fonts - Nunito and Nunito Sans. So you can easily change them, simply replacing

<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900|Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">

in your <head></head> section to your new link from Google Fonts.

If you want to use non-latin subset, add to the end of url above &subset=cyrillic-ext. E.g. it will be: <link href="https://fonts.googleapis.com/css?family=PT+Sans:200,300,400,600,700,800,900|Open+Sans:200,300,400,600,700,800,900&subset=cyrillic-ext" rel="stylesheet">

After that, replace in /css/framework.css and /css/style.css:
"Nunito Sans" -> "Open Sans"
"Nunito" -> "PT Sans"

Change Images

Startup Framework 2 uses 2 versions of images - regular and 2x for retina displays. So don't forget about it, when you change images. If you don't want to use 2x images, remove srcset="..." attribute from <img> tag:

<img srcset="i/image.png 1x, i/image_2x.png 2x" src="i/image.png" alt="" />

Full classes guide

float_left, float_right
Sets float:left; or float:right; CSS property. Show example

<div class="float_left"></div>
There is some text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
<div class="float_left"></div>
There is some text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

clearfix
Clears the floats. Don't forget to add this class to parent element if you use float_left or float_right class.
Read more what clearfix is and how to use it. Show example

<div class="clearfix">
    <div class="float_left"></div>
    <div class="float_right"></div>
</div>

inline_block
Sets display:inline-block; CSS property.
Read more about this CSS property. Show example

<div class="inline_block right20"></div>
<div class="inline_block"></div>
One more example:
There is some text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
<div class="inline_block"></div>
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

hidden
Sets display:none; CSS property. Show example

Code:
Inside this box we've got some <span class="hidden">hidden</span> text.
Result:
Inside this box we've got some text.

flex or d-flex
Sets display:flex; CSS property.
Combine this class with Bootstrap's classes
justify-content-start,
justify-content-end,
justify-content-between,
align-items-start,
align-items-end,
align-items-center,
align-items-stretch,
flex-column,
flex-row-reverse
and a lot more!
Check full list in Bootstrap documentation. Show example

Parent div has flex justify-content-start classes:

div 1
div 2

Parent div has flex justify-content-end classes:

div 1
div 2

Parent div has flex justify-content-between classes:

div 1
div 2

Parent div has height100 flex justify-content-center align-items-start classes:

div 1
div 2

Parent div has height100 flex justify-content-center align-items-end classes:

div 1
div 2

Parent div has height100 flex justify-content-center align-items-center classes:

div 1
div 2

Parent div has height100 flex justify-content-center align-items-stretch classes:

div 1
div 2

Parent div has flex flex-column classes:

div 1
div 2

Parent div has flex justify-content-center flex-row-reverse classes:

div 1
div 2

widthXX
Sets width:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170. Show example

<div class="width400 height100"></div>

max_widthXX
Sets max-width:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170. Show example

<div class="max_width700 height100"></div>

min_widthXX
Sets max-width:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170. Show example

<div class="min_width400 height100"></div>

width_full
Sets width:100%; CSS property. Show example

Div is 100% wide even it has width_200 class

<div class="inline_block width200 width_full height100"></div>

max_width_full
Sets max-width:100%; CSS property. Show example

<div class="width600 max_width_full height100"></div>

heightXX
Sets height:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170.
Also possible to use height_1 - height_9 classes
to set height:1px; - height:9px; Show example

<div class="width400 height100"></div>

max_heightXX
Sets max-height:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170. Show example

<div class="width800 padding_top5 padding_bottom5 max_height100"></div>

min_heightXX
Sets max-height:XXpx; CSS property where XX - value in pixels with 10px step.
Value range is 10-1170. Show example

<div class="width500 min_height100"></div>

height_full
Sets height:100%; CSS property. Show example

Parent block has 70px height.

<div class="width400 height_full"></div>

max_height_full
Sets max-height:100%; CSS property. Show example

<div class="width800 padding_top5 padding_bottom5 max_height_full"></div>

leftXX
Sets margin-left:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

<div class="left50"></div>

rightXX
Sets margin-right:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

<div class="right50"></div>

topXX
Sets margin-top:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Some div above
<div class="top30"></div>

bottomXX
Sets margin-bottom:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

<div class="bottom30"></div>
Some div below

sidesXX
Sets margin-left:XXpx; margin-right:XXpx; CSS properties where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

<div class="sides50"></div>

margin_auto
Sets margin-left:auto; margin-right:auto; CSS properties. Show example

<div class="max_width500 margin_auto"></div>

padding_leftXX
Sets padding-left:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Parent div got padding_left50 class

padding_rightXX
Sets padding-right:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Parent div got padding_right50 class

padding_topXX
Sets padding-top:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Parent div got padding_top30 class

padding_bottomXX
Sets padding-bottom:XXpx; CSS property where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Parent div got padding_bottom30 class

padding_sidesXX
Sets padding-left:XXpx; padding-right:XXpx; CSS properties where XX - value in pixels with 5px step.
Value range is 5-1000. Show example

Parent div got padding_sides50 class

nopadding_left
Sets padding-left:0; CSS property.

nopadding_right
Sets padding-right:0; CSS property.

nopadding
Sets padding-left:0; padding-right:0; CSS properties.

text-left, text-right, text-center
Sets text-align:center; CSS property. Show example

This div got text-left class
This div got text-right class
This div got text-center class

fontXX
Sets font-size:XXpx;line-height:(XX+10)px; CSS properties where XX - value in pixels with 2px step. Value range is 12-102. Show example

This div got font22 class

line_heightXX
Sets line-height:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 12-202. Show example

This div got font22 and line_height150 classes

font_second
Sets font-family:$font_second; CSS property. Show example

This div got font_second class and has a different font

uppercase
Sets text-transform:uppercase; CSS property. Show example

This div got uppercase class

underline
Sets text-decoration:underline; CSS property. Show example

This link got underline class

light
Sets font-weight:300; CSS property. Show example

This div got light class

medium
Sets font-weight:500; CSS property. Show example

This div got medium class

semibold
Sets font-weight:600; CSS property. Show example

This div got semibold class

bold
Sets font-weight:700; CSS property. Show example

This div got bold class

spacingXX
Sets letter-spacing:(XX/10)px; CSS property where XX - value in pixels. Value can be: 10, 15, 17, 20, 25. Show example

Text with spacing10 class
Text with spacing15 class
Text with spacing17 class
Text with spacing20 class
Text with spacing25 class

opacityXX
Sets opacity:(XX/10); CSS property where XX - value with step 1. Value range is 0-10. Show example

10
9
8
7
6
5
4
3
2
1
0

Text colors
You can add class with the name of text color, that you want to set. All available colors:
white, blue, green, red, soft_red, pink, dark_blue, light_gray, medium_gray, dark_gray, black, , , dropbox_color

bg_[color_name]
You can add class with the name of background color, that you want to set. All available colors:
white sand blue light_blue green red soft_red pink light_gray medium_gray dark_blue dark_gray black twitter_color facebook_color Show example

bg_blue
bg_white
bg_sand
bg_light_blue
bg_green
bg_red
bg_soft_red
bg_pink
bg_light_gray
bg_medium_gray
bg_dark_blue
bg_dark_gray
bg_black
bg_twitter_color
bg_facebook_color

link
This class used to be able to set color and hover color for links.
* Note: Always set "href" attribute to all <a></a> tags for correct displaying. Show example

This is red link

radiusXX
Sets border-radius:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 4-32. Show example

This div got radius12 class

radius_full
Sets border-radius:50%; CSS property. Show example

height200 width200 radius_full

noradius, noradius_top, noradius_right, noradius_bottom, noradius_left
Sets border-radius:0; CSS property of choosen corners.

relative
Sets position:relative; CSS property.

absolute
Sets position:absolute; CSS property.

Full elements guide

Buttons

To create button use btn class.

Available Properties

sizeXX
Sets height of a button where XX = 40,50,60,70,80. Show example

All buttons also have blue and width140 classes:

radiusXX
Sets border-radius:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 4-32.
Also can be: noradius, noradius_top, noradius_right, noradius_bottom, noradius_left Show example

Color Name
Sets color of a button. Can be:
blue, transparent_blue, red, transparent_red, green, transparent_green, black, transparent_black, pink, transparent_pink, dark_blue, transparent_dark_blue, light_gray, transparent_light_gray twitter_color, transparent_twitter_color, facebook_color, transparent_facebook_color, white, transparent_white,

If You want to use "transparent" colors, you should also add classes border and border_[COLOR_NAME] Show example

fontXX
Sets font-size:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 12-102.
Default value is 16. Show example

All buttons also have blue and width140 classes:

padding_sidesXX
Sets padding-left:XXpx; padding-right:XXpx; CSS properties where XX - value in pixels with 5px step. Value range is 5-1000.
All buttons are inline-blocks by default and have no padding-left and padding-right. So you can set space between border and text as you want. Show example

Inputs

To create input use input class with your <input> tag.

Available Properties

sizeXX
Sets height of input where XX = 36,38,40,50,60. Show example

All inputs also have width140, border, border_green, padding_sides20 classes:

radiusXX
Sets border-radius:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 4-32.
Also can be: noradius, noradius_top, noradius_right, noradius_bottom, noradius_left
Works the same as button radius Show example

All inputs also have width140, size50, border, border_green, padding_sides20 classes:

border border_[color_name]
Sets color of an input's border. [color_name] can be:
blue, red, green, black, pink, dark_blue, light_gray, twitter_color, facebook_color, white, transparent_white Show example

All inputs also have width180, size50, border padding_sides20 classes:

focus_[color_name]
Sets color of an input's border on focus. [color_name] can be:
blue, red, green, black, pink, dark_blue, light_gray, medium_gray, twitter_color, facebook_color, white Show example

All inputs also have width180, size50, border border_light_gray padding_sides20 classes:

Selects

To create selects use input class with your <select> tag.

Available Properties

All properties are the same as inputs.
You can add white class to make select arrow white. Show example

Textareas

To create textarea use input class with your <textarea> tag.

Available Properties

All properties are the same as inputs.
Simply add heightXX class to change height of textarea. Show example

Animations

To simply create beautiful on scroll animations we included in Startup Framework 2 AOS library. It has a lot of effects and settings. All You need to do is add data-aos="ANIMATION_NAME" to elements that you'd like to animate. It could be a whole block or only it's title and text.

Check all available animations and settings on AOS website or check full parameters list on their github repository.

A few examples:

<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="fade-left"></div>
<div data-aos="flip-left" data-aos-once="true"></div>
<div data-aos="flip-right" data-aos-once="true"></div>
<div data-aos="zoom-in" data-aos-offset="500" data-aos-duration="500"></div>
<div data-aos="zoom-out" data-aos-offset="50" data-aos-duration="2000"></div>