Solucious Styleguide
Solucious theme build upon Bootstrap 3, v3.3.7.
Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto, and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Paragraph text ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
Heading 1 class bold c-green-1
Heading 2 class bold c-bluelight
Heading 3 class bold text-center
Heading 4
Heading 5
Heading 3 class h1
- Text element with class 'custom_list li-pink' other colors:
- li-coffee
- li-coffee-3
- li-coffee-4
- li-pink
- li-purple
- li-orange-3
- li-blue
- li-yellow
- li-green
Margin & Padding
Margin
m = margin
t = top
r = right
b = bottom
l = left
Space: 1 - 10, 1=10px, 10=100px
Classes to remove margins:
- m-0
- mt-0
- mr-0
- mb-0
- ml-0
Example: mt-3 = margin-top: 30px
Padding
p = padding
t = top
r = right
b = bottom
l = left
Space: 1 - 10, 1=10px, 10=100px
Classes to remove padding:
- p-0
- pt-0
- pr-0
- pb-0
- pl-0
Example: pt-3 = padding-top: 30px
Color classes
'c-' stands for color, to use on text elements
'bg-' stands for background-color, useful on articles / full width rows
c-brandcolor
bg-brandcolor
#9CC929
c-green-1
bg-green-1
#8FC302
c-green-2
bg-green-2
#7BA703
c-orange-1
bg-orange-1
#ff7900
c-orange-2
bg-orange-2
#e06a00
c-bluelight
bg-bluelight
#0077c0
c-red
bg-red
#D0021B
c-black
bg-black
#000000
c-white
bg-white
#FFFFFF
c-gray-1
bg-gray-1
#58363F
c-gray-2
bg-gray-2
#E5E5E5
c-gray-3
bg-gray-3
#D8D8D8
c-gray-4
bg-gray-4
#9B9B9B
c-gray-5
bg-gray-5
#5d5d5d
c-gray-6
bg-gray-6
#282828
c-gray-7
bg-gray-7
#4C4C4C
c-gray-8
bg-gray-8
#F7F5F5
c-gray-9
bg-gray-9
#58363F
c-coffee
bg-coffee
#C8A177
c-coffee-2
bg-coffee-2
#b5814a
c-coffee-3
bg-coffee-3
#815e64
c-coffee-4
bg-coffee-4
#61363d
c-pink
bg-pink
#eb70b1
c-orange-3
bg-orange-3
#5e3940
c-purple
bg-purple
#f56644
c-blue
bg-blue
#5599ac
Article with container ID
Col md 4
The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic
Col md 4
The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic
Col md 4
The article has an Id 'container' and a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic
Article without container ID
Image with a class 'stretch' will set the image to 100% width
Col md 4
The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic
Col md 4
The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic
Col md 4
The article has only a Class 'row'. This content element has a class 'col-md-4 pt-3 pb-3'. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. https://getbootstrap.com/docs/3.3/css/#grid-example-basic