- logo_solucious_2023_white
- bg-brandcolor
- pl-2 pt-2 pr-2 pb-2
- logo_solucious_2023
- bg-white
- pl-2 pt-2 pr-2 pb-2
Primaire kleuren
Secundaire kleuren
basic-sans,sans-serif
Basic Sans
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTU
0123456789
:;/!?&%€
Basic Sans regular
Basic Sans bold
Basic Sans black italic
NeueCampton-Regular
Campton
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTU
0123456789
:;/!?&%€
Campton book
Campton Bold
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
Buttons
underline
greenlink
purplelink
primarylink
btn btn-default
btn btn-primary
btn btn-secondary
btn btn-tersiair
btn btn-quartair
btn btn-yellow
btn btn-promo
btn btn-white-default
btn btn-default btn-shadow
btn with icon
Button tags
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
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
Hoe bestel je?
Vul je winkelmandje
Log in
Kies je bezorgmoment
Plaats je bestelling
Ontvang je bestelling
Log in
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