A beautiful CSS framework created to help you build websites.
All you have to do is drop Freeeze into your project, and you will instantly have a professional website already made.
Once you drop Freeeze into your project, you have many customizable css classes to use to make your website perfect for you.
This css framework was carefully hand-crafted to guarentee your website has a beautiful, customizable, and minimalistic design.
Here is a guide of all the things styled by Freeeze, how to use the grid, and how to use components.
Freeeze styles based on rem units. All rem units are converted to base 10, so 1rem is equal to 10px. By default, all headings, paragraphs, and code use system fonts, using the most modern one available on a user's operating system.
Freeeze comes with a minimal, 12 column grid, with intuitive class names.
Originally, the grid is based off of flexbox. However, it is customizable.
Freeeze styles buttons with several different styles, colors, and borders. These styles can easily be changed, and are easily maintained.
Freeeze styles all common form elements with simple, clean styles.
Freeeze comes with a simple, customizable navigation component.
Freeeze comes with a sleek card component.
Here is some content for a beautiful card made with the Freeeze CSS framework. This card is inside a 2 column grid made with css grid.
Here is some content for a beautiful card made with the Freeeze CSS framework. This card is inside a 2 column grid made with css grid.
Freeeze provides many utility classes to speed up development. Here are some of them.
bg-dark - dark background color
display-flex - the display is using flexbox
center-page - center content horizontally and vertically
w-100 - the width is 100% of the parent's width
m-1 - add 10px or 1rem of margin to the element selected
p-1 - add 10px or 1rem of padding to the element selected
border-1 - add a 1px or 0.1rem lightgrey border to the element selected
rounded-1 - add 10px or 1rem rounded corners to the element selected
fade-in - add a fade in animation to the element selected
hide-phone - element will be hidden completely on a mobile screen