Let's have fun
Let's have fun
Intro
Icons
In the past I used Font Awesome icons but since they moved away from free download and you can only use CND via a personal code, I stopped doing that.
I have now added about a hundred of my own icons to css-framework.css.
In the document Icons.php you can copy the code of each icon and paste it into your HTML document.
icon icon-menu
Colors
With CSS Framework you have twelve basic colors, hover colors and background colors at your disposal.
The colors for text, buttons and all components can be found on the relevant pages
Typography
In the typography document you will find text, paragraphs, headers, fonts, quote, links, markers, horizontal lines, preloads, text dimensions and text shadow.
Here you will also encounter HTML code blocks that you can directly copy and paste into your HTML document.
<p class="text-sm"></p>
Container
With the container class you give the display a maximum width of 1200px, center the container and provide padding.
There is also a 100% wide container with padding.
The classes are part of the responsive sector.
Grid
The CSS framework's responsive grid system is extensive and simple to use and gives you the tools to build a responsive website.
The grid system uses four breakpoints:
- --breakpoint -sm: 576px smartphone
- --breakpoint -md: 768px tabled
- --breakpoint -lg: 992px laptop - pc
- --breakpoint -xl: 1200px pc
The classes are part of the responsive sector.
Flex align
With these classes you can determine the alignment of elements in collaboration with the display-flex class.
Many parts of this framework have already been created in flexbox mode.
The classes are part of the responsive sector.
Navbar
The navigation classes allow you to display a well-functioning and cleanly displayed horizontal menu, fully responsive.
The menu can be displayed on the left, centered or right. You can also pin it to the top of the screen (fixed) or have it stick to the top (sticky).
The navbar class is part of the navigation sector.
Sidenav
The sidenav classes allow you to display a well-functioning and cleanly displayed vertical menu, fully responsive.
The sidenav class is part of the navigation sector.
Menu
The menu is a standalone navigation menu, with the option of submenus.
The menu classes allow you to display a well-functioning and cleanly displayed vertical menu, fully responsive.
The menu class is part of the navigation sector.
Buttons
With the button classes you can turn links, buttons and input buttons into beautifully displayed buttons.
There are also icon buttons and dropdown buttons and there is a button that lets the page return to the top.
The button class is part of the navigation sector.
Pagination and Breadcrumb
The pagination and breadcrumb classes are presented and explained in the pagination document.
These classes are navigation helpers.
The pagination and breadcrumb classes are part of the navigation sector.
Borders
With the border classes you can provide elements with borders, erase borders, determine the thickness and style the borders.
The border classes are one of the many helpers of this framework system.
Margin
With the margin classes you can create space around your elements.
The margin classes are one of the many helpers of this framework system.
Padding
With the padding classes you can create border space within the elements.
The padding classes are one of the many helpers of this framework system.
White-space
With the white-space classes you can create vertical space in your page. (height)
The white-space classes are one of the many helpers of this framework system.
Width
With the width classes you can create horizontal space in your page, both in pixels and in percentages.(width)
The width classes are one of the many helpers of this framework system.
Miscellaneous
In the miscellaneous document you will find a lot of useful helpers that you will definitely want to use when creating web pages.
All these helpers can simplify the process of creating a web page.
The classes are part of the helpers sector.
Accordion and Togle block
Everyone knows an accordion, wide buttons that reveal hidden content.
I supply two types, one with several wide buttons and one with only a normal button.
With the classes provided by this framework you can create sleek and well-functioning accordion.
The accordion classes are part of the components sector.
Alerts
With the alerts classes you can create four beautiful different alerts.
The four are:
- DANGER
- WARNING
- SUCCESS
- INFO
The alerts classes are part of the components sector.
Badge, Badge-pill and Sign
With the badge, badge pill and sign classes you can create sleek and fun notifications, within other elements or on their own.
The classes are part of the components sector.
Card
The card classes allow you to create shadowed areas with text, images, a header, and a footer.
For example, a card is useful as a profile card.
The classes are part of the components sector.
Form
With the form classes you can create a sleek and user-friendly form.
The classes are part of the components sector.
Footer
The footer class allows you to add a beautiful footer to your page.
The footer class is part of the navigation sector.
Header
The header class allows you to create a beautiful header for your web page.
The header class is part of the navigation sector.
Images
With these classes you can set and format images.
There is also a simple slider and thumbnail image row that becomes visible after clicking through a modal.
The classes are part of the components sector.
List
With these classes you can change the appearance of the list.
You give the list lines instead of a point or number.
The classes are part of the components sector.
Modal
With the modal classes you can create a popup screen that appears after pressing a button.
In principle you can put all elements on the modal.
The classes are part of the components sector.
Table
With the table classes you can create beautiful and functional tables.
The table is responsive, you can make the table with or without borders, with or without zebra pattern, screen wide or content wide.
You can adjust the columns and headings.
The classes are part of the components sector.
Tabs
With the tab classes you can create sleek tabs.
The classes are part of the components sector.
Tooltip
With the tooltip classes you can create simple but effective tooltips.
The classes are part of the components sector.
