Alt tekst for google

Image with class 'text-center header-visual'

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

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

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

Full width image section, no gutters between cols

Alt tekst for google
Alt tekst for google
Alt tekst for google
Alt tekst for google

CSS mapping

Character mapping

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. 

Image carousel col-md-6

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.