Templates

Getting started with mini.css is reasonably easy, however sometimes you need a couple of examples or templates to figure out the optimal way to design your website or app. To help you get started, we maintain a handful of templates that can help you quickstart your projects without having to read the full documentation.

• See the Pen Single Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Single column template

  The most basic layout template for a blog or website consists of a sticky header, one column used to display content and a footer at the bottom of the page. This template uses the grid system of mini.css, along with its navigational elements to provide a simple responsive website design, that you can use to display content across devices without the need for any changes in the layout.




• See the Pen Two Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Two-column template

  Another common layout template for blogs and websites consists of a sticky header, a footer and two columns for displaying content. Like in most templates, the grid system of mini.css is used to provide an easy way to create columns and make them responsive across multiple screen sizes and devices.




• See the Pen Three Column Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Three-column template

  Last but not least, the three-column website layout template is better used in websites with a lot of content. The grid system of mini.css provides an easy solution to handling lots of content on multiple screen sizes and devices, making the content responsive. Finally, as in most templates, navigational elements such as sticky headers and foooters are used to complete the template.




• See the Pen Card Showcase Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Card showcase template

  Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of mini.css, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.




• See the Pen Android App Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Android app template

  Web application layout templates are pretty popular these days, especially ones that look and feel like native Android apps. Utilizing some clever CSS tricks, the grid module and navigational elements from mini.css, we created a pretty simple app template, complete with a call-to-action button and header bar, making it look quite similar to a native Android app and display properly across multiple devices.




• See the Pen Tabbed App Template (mini.css) by Angelos Chalaris (@chalarangelo) on CodePen.

  Tabbed app template

  A single page application layout template can be built using many things, but tabbed web applications are one of our favorites. Utilizing the tab module of mini.css and some CSS tricks, we created a simple single page app template with three tabs, containing different content. The template will switch to a stacked view on smaller devices, although if you add more than three tabs, you will have to alter a couple of values to make sure that everything fits nicely on the screen.