Documentation on Startup 3

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

Getting started

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

Preview, Export project, create randomized layout

First of all, go to generator app, drag and drop some blocks from left panel to a central working area or simply choose number of blocks that you want to have in your project and click "Generate" button - it will create a page generated from a randomly choosen blocks. This will be a good point to start with.

After at least one block choosen, you can preview your project (click on the "Eye" button) or export it.

Note that if you don't purchased Startup 3 the only free blocks layout will be shown and exported!
Other blocks will be replaced to preview images and cannot be changed or customized!

Use presets

We've made 6 predefined design styles to show you all power of Startup 3 generator. Simply choose some of them in "Apply preset" block and it will drammaticaly change style of all page!

Change Fonts

We use Google Fonts - "Poppins" font family by default. It can be simply changed in "Typography" block of our generator app:

First of all, choose the subset in top-right corner (if you need to use non-latin subset). After that, you can choose your main font ("Body") and font for headings ("Heading"). Also you can choose font-weight of both of them.

But if you want to change font manually, you can simply replace

<link href="https://fonts.googleapis.com/css?family=Poppins:100,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. for cyrillic subset 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 old font to a new one in /css/framework.css and /css/style.css:
"Poppins" -> "Open Sans"
"Poppins" -> "PT Sans"

or if you use scss, replace variables value in /scss/variables.scss:
$font_heading: Poppins;
$font_main: Poppins;

Change colors

You can change colors of all elements in our generator. Just go to "Color palette" block and change them!

First row "Action" set colors of buttons and links (there are 3 possible stylesof this elements).
Second row "Basic" set colors of texts. There are 4 settings, left to right:

  1. Main color - set default color to all elements;
  2. Heading color - set color of headings and some texts that should make an attention on them;
  3. White color - set color to all texts on dark background (so they should be light);
  4. Gray color - set color of few other elements, mostly borders and dividers

Third row "Background" set colors of dark (1st option) and light (2nd option) backgrounds.

Also, you can click on "Random" button and get unique color scheme in one second!

Set animations

You can set on-scroll animations for your project in 2 clicks!

Go to "Animation" block and set toggle in top-right corner to "on" position. It will enable animations in your project.
After that, you can choose animation speed (0 is a slowest one and 10 is fastest) and one of three styles: Fade Down, Fade Up, Zoom In.

More information about setting animations here.

Change Images

Startup 3 uses 2 versions of images - regular and 2x for high-resolution 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@2x.png 2x" src="i/image.png" alt="" />

Full classes guide

Important note!
Startup 3 supports all Bootstrap 4 classes, so you can check actual Bootstrap 4 documentation here.
We've extended some of Bootstrap classes and added some new ones.

Width and Height

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

<div class="w-400 h-80"></div>

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

<div class="mw-700 h-80"></div>

w-full
Sets width:100%; CSS property. Show example

Div is 100% wide even it has w-200 class

<div class="w-200 w-full h-80"></div>

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

<div class="w-600 mw-full h-80"></div>

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

<div class="w-400 h-80"></div>

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

<div class="w-800 pt-5 pb-5 mh-100"></div>

h-full
Sets height:100%; CSS property. Show example

Parent block has 70px height.

<div class="w-400 h-full"></div>

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

Parent block has 70px height.

<div class="w-400 mh-full"></div>

Margins

We've extend Bootstrap's mt-4 type classes to make positioning of elements much easier and flexible.
Now value can range from 5px to 1000px (not rem as it used in Bootstrap).

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

<div class="ml-50"></div>

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

<div class="mr-50"></div>

mt-XX
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="mt-30"></div>

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

<div class="mb-30"></div>
Some div below

mx-XX
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="mx-50"></div>

mx-auto (Bootstrap's original class)
Sets margin-left:auto; margin-right:auto; CSS properties. Show example

<div class="mw-500 mx-auto"></div>

Paddings

We've extend Bootstrap's pt-4 type classes to make paddings much flexible.
Now value can range from 5px to 1000px (not rem as it used in Bootstrap).
You can still use pX-[0...5] Bootstrap's classes - they're not affect any change.

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

Parent div got pl-50 class

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

Parent div got pr-50 class

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

Parent div got pt-30 class

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

Parent div got pb-30 class

px-XX
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 px-50 class

Font styling

f-XX
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 f-22 class

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

This div got f-22 and lh-150 classes

f-main
Sets font-family:$font_main; CSS property. Used to set base font-family for page. Show example

This div got f-main class

f-heading
Sets font-family:$font_heading; CSS property. Used to set another font for some elements, mostly for headinghs. Show example

This div got f-heading class

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

This link got underline class

Different font weight. If your font doesn't support choosen font-weight, it will be changed to closest.
Possible values:

thin - sets font-weight:100; CSS property.
extralight - sets font-weight:200; CSS property.
light - sets font-weight:300; CSS property.
regular - sets font-weight:400; CSS property.
medium - sets font-weight:500; CSS property.
semibold - sets font-weight:600; CSS property.
bold - sets font-weight:700; CSS property.
extrabold - sets font-weight:800; CSS property.
heavy - sets font-weight:900; CSS property. Show example

This div got thin class
This div got extralight class
This div got light class
This div got regular class
This div got medium class
This div got semibold class
This div got bold class
This div got extrabold class
This div got heavy class

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

Text with sp-10 class
Text with sp-15 class
Text with sp-20 class
Text with sp-25 class

op-XX
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

Colors

Note that color of each class set throught our generator app.

Text colors
You can add class with the name of text color, that you want to set.
List of available colors (sorting the same as they're goes in generator app):

  • action-1
  • action-2
  • action-3
  • color-main
  • color-heading
  • color-white
  • color-gray

also, there are a few colors that are not change throught the generator app, but you can use them too:

  • color-transparent-white
  • color-red
  • color-twitter
  • color-facebook
  • color-dribbble

Background colors
There are 2 colors that can be changed throught the generator app:

  • bg-dark
  • bg-light

also, you can use all colors that pre-defined for texts:

  • bg-action-1
  • bg-action-2
  • bg-action-3
  • bg-main
  • bg-heading
  • bg-white
  • bg-gray

Border radiuses

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

h-200 w-200 radius_full

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

Positioning elements

relative
Sets position:relative; CSS property.

absolute
Sets position:absolute; CSS property.

Full elements guide

Buttons

To create button use btn class.

Available Properties

Size of a button
Can be sm | md | lg | xl.
Use it with your btn class: <a href="#" class="btn action-2 sm">text</a>

Examples:

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

Color Name
Sets color of a button. Can be:

  • action-1
  • action-2
  • action-3
  • action-white
  • action-red
  • action-facebook
  • action-twitter
  • action-dribbble

If You want to use "transparent" colors, you should also add class border-[COLOR_NAME]

To create link use link class with your <a> tag.
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.

Full list of available colors:

Also, it may be useful to use underline class with links: action-3 and underline

Inputs

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

Available Properties

Height of input
Can be sm | md | lg.

All inputs also have w-240, border-action-1, text-center classes:

radiusXX
Works the same as button radius

Text color
Works the same as text color

border-[color_name]
Sets color of an input's border. All possible options:

focus-[color_name]
Sets color of an input's border on focus. All possible options:

placeholder-[color_name]
Sets color of an input's placeholder. All possible options:

Selects

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

Available Properties

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

Textareas

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

Available Properties

All properties are the same as inputs.
Simply add h-XX class to change height of textarea.

Checkboxes, Radio-buttons

To create checkbox or group of radio-buttons, use this code:

Checkbox

<input type="checkbox" name="SOME_NAME" class="d-none" id="UNIQUE_ID" />
<label for="UNIQUE_ID">Some text</label>

Note that UNIQUE_ID must be unique for whole page!

Group of radio-buttons

<input type="radio" name="SOME_NAME" class="d-none" id="UNIQUE_ID_1" value="1" />
<label for="UNIQUE_ID_1">This radio set value to 1</label>
<input type="radio" name="SOME_NAME" class="d-none" id="UNIQUE_ID_2" value="2" />
<label for="UNIQUE_ID_2">This radio set value to 2</label>

Note that all id's must be unique for whole page!

Available Properties

All properties are the same as inputs.
Examples:

Animations

To simply create beautiful on scroll animations we included in Startup 3 "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.
Also, you can set data-aos-delay="XXX" parameter, where XXX is delay of animation start in milliseconds. It can be useful to create "cascades" of animations, when you want some elements to animate after another (e.g. two blocks in row).

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>
<div data-aos="zoom-in"></div>
<div data-aos="zoom-in" data-aos-delay="500"></div>