Getting to Know Cutestrap, a Lightweight CSS Framework

Cutestrap is a brand new CSS framework. This article presents Cutestrap’s features and puts the framework to the test by using it to build a simple one-page HTML template.

Like most successful web development boilerplates and frameworks, Cutestrap decreases development time and cuts down on repetitive tasks. According to the catchy definition on its documentation page, Cutestrap by Tyler Childs is “A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.” It is a nice starting point for quick prototyping of websites and apps.

For all its small file size, Cutestrap is not just a blank starter template with some basic reset styles. It comes bundled with a choice of typefaces, a color palette, and some definite views on how form fields and a few other elements should look.

On the other hand, Cutestrap is miles away from offering the huge number of features and components that full-blown frameworks like Bootstrap and Foundation bring to the table.

Super tiny – only 8kb of CSS code
Easy customization, even easier if you use Sass
Great CSS organization using the BEM methodology
Consistent vertical rhythm of typographic elements
KSS-generated documentation to facilitate turning Cutestrap documentation into your project’s living styleguide

You can change pretty much everything in Cutestrap either by using its Sass version or its compiled counterpart. In this regard, Cutestrap is not different from other popular CSS frameworks. If you prefer vanilla CSS, you can include cutestrap.css (or its minified version in production) directly in your project and then override Cutestrap CSS rules from your custom stylesheet document.

The order in which you write the @import statements is important. In fact, including custom-variables.scss before cutestrap.scss ensures that all Cutestrap variable values you override in your custom file will take effect in the compiled CSS output. Your custom Sass code goes below the @import statements.

Besides some smart default styles, Cutestrap offers a grid system, beautiful typography, common website components like buttons and form fields, and a few handy utility classes.

Cutestrap offers a super simple grid built using flexbox. If you use the grid without enclosing it inside the .wrapper container, your content will span the entire width of the screen, which may or may not be the result you’re after.

The grid itself only needs a container element with a class of .grid. Columns inside this element will be evenly distributed throughout the available space. No need to add classes for rows and columns.

Typographic elements in Cutestrap are sized using rem units based on a font-size of 62.5% on the root html element, which goes up to 78.125% for viewports larger than 960px. The baseline of 2.4rem results in a harmonious vertical rhythm, which enhances the appearance of content on the webpage.

Cutestrap offers styling for level 1 through to level 6 headings, as well as paragraph, blockquote, and table elements.

The default CSS font stack for headings and body copy includes the following typefaces: Avenir, Avenir Next, Helvetica Neue, Segoe UI, Verdana. You can easily change this using regular CSS or Sass.

Cutestrap applies distinctive styles to button elements, submit/input elements, and link elements with a class of .btn. Cutestrap builds form fields using a unified markup structure and CSS styling, which give them a consistent appearance across browsers. Cutestrap offers a small number of handy utility classes to do things like aligning text, clearing floats, increasing or decreasing font-size, and more.

The full list of Cutestrap utility classes is available on the Cutestrap documentation page.

Continue reading %Getting to Know Cutestrap, a Lightweight CSS Framework%

by Maria Antonietta Perna via SitePoint