breeze framework documentation

typography

this is small text (.text-sm).

this is medium text (.text-md).

this is large text (.text-lg).

this is extra-large text (.text-xl).

this is light font weight using dosis (.dosis-light).

this is regular font weight using dosis (.dosis-regular).

this is bold font weight using dosis (.dosis-bold).

buttons

grid layout

the grid system supports layouts with 2, 3, or 4 columns. on smaller screens, grids collapse into a single column.

cards

navbar

the navbar component provides a flexible layout for a responsive header.

code blocks: inline

use the <code> element to highlight inline code like var x = 10;.

code blocks: block-level

use the <pre> <code> elements together to create a code block

                // this is a simple javascript example
                function greet(name) {
                console.log(`hello, ${name}!`);
                }
                greet('breeze');
            

shadows & border radius

responsive design

the grid system and other styles adapt to smaller screens. resize the browser window to see the changes.

footer