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: