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.
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"
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="" />
We provide free sources for designers. You can download it, using this links:
float_left, float_right
Sets float:left; or float:right; CSS property.
Show example
<div class="float_left"></div><div class="float_left"></div>
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><div class="inline_block"></div>
hidden
Sets display:none; CSS property.
Show example
Inside this box we've got some <span class="hidden">hidden</span> 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:
Parent div has flex justify-content-end classes:
Parent div has flex justify-content-between classes:
Parent div has height100 flex justify-content-center align-items-start classes:
Parent div has height100 flex justify-content-center align-items-end classes:
Parent div has height100 flex justify-content-center align-items-center classes:
Parent div has height100 flex justify-content-center align-items-stretch classes:
Parent div has flex flex-column classes:
Parent div has flex justify-content-center flex-row-reverse classes:
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
<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>
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
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
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
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
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
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
text-left classtext-right classtext-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
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
font22 and line_height150 classes
font_second
Sets font-family:$font_second; CSS property.
Show example
font_second class and has a different font
uppercase
Sets text-transform:uppercase; CSS property.
Show example
uppercase class
underline
Sets text-decoration:underline; CSS property.
Show example
light
Sets font-weight:300; CSS property.
Show example
light class
medium
Sets font-weight:500; CSS property.
Show example
medium class
semibold
Sets font-weight:600; CSS property.
Show example
semibold class
bold
Sets font-weight:700; CSS property.
Show example
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
spacing10 classspacing15 classspacing17 classspacing20 classspacing25 class
opacityXX
Sets opacity:(XX/10); CSS property where XX - value with step 1. Value range is 0-10.
Show example
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,
twitter_color,
facebook_color,
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
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
radiusXX
Sets border-radius:XXpx; CSS property where XX - value in pixels with 2px step. Value range is 4-32.
Show example
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.
To create button use btn class.
sizeXX
Sets height of a button where XX = 40,50,60,70,80.
Show example
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
All buttons also have blue and width140 classes:
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
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
All buttons also have blue class:
To create input use input class with your <input> tag.
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:
To create selects use input class with your <select> tag.
All properties are the same as inputs.
You can add white class to make select arrow white.
Show example
To create textarea use input class with your <textarea> tag.
All properties are the same as inputs.
Simply add heightXX class to change height of textarea.
Show example
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: