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.

https://getbootstrap.com/docs/3.3/css/

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

btn btn-default

btn btn-primary

btn btn-secondary

btn btn-white-default

btn btn-default btn-shadow

btn with icon

Button tags

Link

<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

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

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

Full width image section, no gutters between cols

CSS mapping

Character mapping

Slide 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

knop

Slide 2

knop

Slide 3

knop

Image carousel col-md-9

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. 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.

Solucious Styleguide

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

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

Buttons

Button tags

Margin & Padding

Margin

Padding

Color classes

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

Col md 4

Col md 4

Article without container ID

Col md 4

Col md 4

Col md 4

Full width image section, no gutters between cols

CSS mapping

Character mapping

Slide 1

Slide 2

Slide 3

Image carousel col-md-9

Slide 1

Slide 2

Slide 3

Image carousel col-md-6