Let's have fun

Let's have fun

Intro

Icons

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

Go

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

Go

Icons
Icons

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>
      

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

Form

With the form classes you can create a sleek and user-friendly form.

The classes are part of the components sector.

Go

Icons
Icons

Footer

The footer class allows you to add a beautiful footer to your page.

The footer class is part of the navigation sector.

Go

Header

The header class allows you to create a beautiful header for your web page.

The header class is part of the navigation sector.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

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.

Go

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.

Go

Icons
Icons

Tabs

With the tab classes you can create sleek tabs.

The classes are part of the components sector.

Go

Tooltip

With the tooltip classes you can create simple but effective tooltips.

The classes are part of the components sector.

Go

Icons