Let's have fun
Let's have fun
Miscellaneous
Info
On this page you will find a lot of useful helpers with some explanation.
Text aligment
text-left
text-center
text-right
text-left
text-center
text-right
<p class="text-left"></p>
<p class="text-center"></p>
<p class="text-right"></p>
float-left
float-right
float-left
float-right
<p class="float-left"></p>
<p class="float-right"></p>
Curves
round-5
<div class="round-5"></div>
round-10
<div class="round-10"></div>
round-20
<div class="round-20"></div>
circle
<div class="circle"></div>
curved
<div class="curved"></div>
fit-content box-center
fit-content box-center
fit-content
box-center
<div class="fit-content"></div>
<div class="box-center"></div>
Position
| Class | Explanation |
|---|---|
position-static |
Default value. Elements are displayed in order as they appear in the document flow |
position-relative |
The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the LEFT position of the element |
position-fixed-top |
The element is placed relative to the browser window, top=0, left=0 |
position-fixed-bottom |
The element is placed relative to the browser window, bottom=0, left=0 |
position-absolute |
The element is positioned relative to the first positioned (non-static) ancestor element |
position-absolute-top-left |
Absolute position, top=0 and left=0 |
position-absolute-top-center |
Absolute position, top=0 and left=50% |
position-absolute-top-right |
Absolute positie, top=0 en right=0 |
position-absolute-middle-left |
Absolute positie, top=50% en left=0 |
position-absolute-middle-center |
Absolute positie, top=50% en left=50% |
position-absolute-middle-right |
Absolute positie, top=50% en right=0 |
position-absolute-bottom-left |
Absolute positie, bottom=0 en left=0 |
position-absolute-bottom-center |
Absolute positie, bottom=0 en left=50% |
position-absolute-bottom-right |
Absolute positie, bottom=0 en right=0 |
position-sticky-top |
The element is positioned based on the user's scrolling position, top of screen More info! |
position-sticky-bottom |
The element is positioned based on the user's scroll position, bottom of screen More info! |
Meer info
position-sticky-*
A sticky element switches between relative and fixed depending on the scroll position. It is positioned relatively until a certain offset position is reached in the viewport - then it "sticks" in place (like position: fixed).
Warning
Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.
HTML code
<div class="position-static"></div> <div class="position-fixed-top"></div> <div class="position-fixed-bottom"></div> <div class="position-relative"></div> <div class="position-absolute"></div> <div class="position-absolute-top-left"></div> <div class="position-absolute-top-center"></div> <div class="position-absolute-top-right"></div> <div class="position-absolute-middle-left"></div> <div class="position-absolute-middle-center"></div> <div class="position-absolute-middle-right"></div> <div class="position-absolute-bottom-left"></div> <div class="position-absolute-bottom-center"></div> <div class="position-absolute-bottom-right"></div> <div class="position-sticky-top"></div> <div class="position-sticky-bottom"></div>
Overflow
| Class | Explanation |
|---|---|
overflow-hidden |
The overflow is cut off and the rest of the content is invisible. |
overflow-auto |
If the overflow is truncated, a scroll bar must be added to see the rest of the content. |
overflow-x-hidden |
If the overflow is cut off horizontally and the rest of the content is invisible. |
overflow-x-auto |
If the overflow is truncated horizontally, a scroll bar will need to be added to see the rest of the content. |
overflow-y-hidden |
If the overflow is cut off vertically and the rest of the content is invisible. |
overflow-y-auto |
If the overflow is truncated vertically, a scroll bar will need to be added to see the rest of the content. |
Overlay
Close the screen with a transparent element as soon as jquery javascript changes the display: none; to display: block;.
overlay
<div class="overlay"></div>
cursor-pointer
Changes the cursor from default to pointer, a hand.
Try it
cursor-pointer
<div class="cursor-pointer"></div>
Afbeeldingen
The class image makes an image responsive. The image below is 1600px x 418px and is resized by the class to the size of the element it is in, reduce the screen to see the result.
image
<img alt="" class="image" src="">
The class image-max makes an image responsive and gives it a width and height of 100%. Click on the heading below to see an example in a new window, reduce the screen to see the result.
image-max
<img alt="" class="image-max" src="">
The class image-hover gives an image a hover effect.
image-hover
<img alt="" class="image image-hover" src="">
The class image-center centers an image.
image-center
<img alt="" class="image image-center" src="">
Lorem tekst
When you create a web page you often want to use lorem text to see what the layout looks like. That's why I included two classes that show a small and large lorem text.
lorem-sm
<p class="lorem-sm"></p>
lorem-lg
<p class="lorem-lg"></p>
Display
| Class | Explanation |
|---|---|
display-none |
The element has been completely removed |
display-inline |
Displays an element as an inline element (such as <span>). Height and width properties have no effect |
display-inline-block |
Displays an element as a block container at the inline level. The element itself is formatted as an inline element, but you can apply height and width values |
display-block |
Displays an element as a block element (such as <p>). It starts on a new line and takes up the entire width |
display-table |
Makes the element behave like a <table> element |
display-table-row |
Makes the element behave like a <tr> element |
display-table-cell |
Makes the element behave like a <td> element |
display-flex |
Displays an element as a block-level flex container |
display-inline-flex |
Displays an element as an inline-level flex container |
HTML code
<div class="display-none"></div> <div class="display-inline"></div> <div class="display-inline-block"></div> <div class="display-block"></div> <div class="display-table"></div> <div class="display-table-row"></div> <div class="display-table-cell"></div> <div class="display-flex"></div> <div class="display-inline-flex"></div>
Display in the breakpoints
You can also apply the display classes in or from a breakpoint.
The breaking points:
- --breakpoint -sm: 576px smartphone
- --breakpoint -md: 768px tabled
- --breakpoint -lg: 992px laptop - pc
- --breakpoint -xl: 1200px pc
SM
display-sm-none
display-sm-inline
display-sm-inline-block
display-sm-block
display-sm-table
display-sm-table-row
display-sm-table-cell
display-sm-flex
display-sm-inline-flex
MD
display-md-none
display-md-inline
display-md-inline-block
display-md-block
display-md-table
display-md-table-row
display-md-table-cell
display-md-flex
display-md-inline-flex
LG
display-lg-none
display-lg-inline
display-lg-inline-block
display-lg-block
display-lg-table
display-lg-table-row
display-lg-table-cell
display-lg-flex
display-lg-inline-flex
XL
display-xl-none
display-xl-inline
display-xl-inline-block
display-xl-block
display-xl-table
display-xl-table-row
display-xl-table-cell
display-xl-flex
display-xl-inline-flex
Year
This feature allows you to display the current year on your page. The function is present in the jQuery script: css-framework.js
All Rights Reserved
<footer> <p>All Rights Reserved <span id="year"></span></p> </footer>
jQuery-script
$(document).ready(function(){
var myDate = new Date();
var myYear = myDate.getFullYear();
$('#year').text(myYear);
});