core.css

An ultra-minimal framework

DownloadSource

Core is a lightweight foundation for building responsive websites. It weighs under 1.3kb, minified and gzipped. There are no pre-styled elements or animations built-in – just a reset and a grid system. This is a framework for people who don't need all the features of larger frameworks and just want to build systematically from the ground up.

A .row is a container of columns. It is full-width unless accompanied by a max-width helper class. See Row Max-Width for a list of these classes.

A .col is a container for your content. Its width is set by indicating how many columns to occupy out of 12. For example, .xs-12 would have a width of 100% and .xs-3 would have a width of 25%. Basic Grid Demo →

<div class="row"><!-- Row with no max-width -->
    <div class="col xs-12">XS: 100%</div>
</div>
<div class="row sm"><!-- Row with a 768px max-width -->
    <div class="col xs-6">XS: 50%</div>
    <div class="col xs-6">XS: 50%</div>
</div>

The width of a .col can be set to change according to screen size by adding a class for each screen size you want to optimize for, from extra-small (xs) to extra-large (xl). The grid system is mobile-first, so every .col needs the .xs-* class, which will also apply on larger screens if larger classes are not specified. See Media Queries for a list of each column class and what their breakpoints are. Responsive Grid Demo →

<div class="row xl">
    <!-- Columns with a breakpoint-->
    <div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
    <div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
</div>
<div class="row">
    <!-- Columns with two breakpoints -->
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
    <div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
</div>

A .col can be hidden for certain screen sizes by setting the number to 0. This sets display: none for that screen size and larger, propagating upward unless overridden just like the non-zero column classes. Hiding/Showing Columns Demo →

<div class="row">
    <!-- Hiding on only the smallest/largest screens -->
    <div class="col xs-0 sm-6">Hidden only on XS screens</div>
    <div class="col xs-6 xl-0">Hidden only on XL screens</div>

    <!-- Showing on only the smallest/largest screens -->
    <div class="col xs-4 sm-0">Visible only on XS screens</div>
    <div class="col xs-0 xl-4">Visible only on XL screens</div>

    <!-- Showing and hiding on every other screen size -->
    <div class="col xs-5 sm-0 md-2 lg-0 xl-9">When would you need this?</div>
</div>

Rows are full-width by default, but can be limited by applying a helper class. These sizes correspond to the upper limit of each media query – or in the case of .xl, what the next interval would be. Row Max-Width Demo →

.xs {max-width: 32rem;} /* 512px (Extra-Small) */

.sm {max-width: 48rem;} /* 768px (Small) */

.md {max-width: 64rem;} /* 1024px (Medium) */

.lg {max-width: 80rem;} /* 1280px (Large) */

.xl {max-width: 96rem;} /* 1536px (Extra-Large) */

Core uses logical breakpoints to structure the grid system. They are evenly spaced out at 256px intervals to create a smooth gradation. Note that there is no media query for the .xs-* classes, because they apply to all screen sizes.

/* >= 0px (Extra-Small) */
/* .xs-[0-12] */

/* >= 512px (Small) */
@media screen and (min-width: 32em) { /* .sm-[0-12] */ }

/* >= 768px (Medium) */
@media screen and (min-width: 48em) { /* .md-[0-12] */ }

/* >= 1024px (Large) */
@media screen and (min-width: 64em) { /* .lg-[0-12] */ }

/* >= 1280px (Extra-Large) */
@media screen and (min-width: 80em) { /* .xl-[0-12] */ }

Core.css includes an aggressive reset to provide a clean slate build upon. HTML elements are reduced to their most basic forms with properties like margin: 0, padding: 0, and box-sizing: border-box. Reset Demo →

A note about accessibility: :focus will be universally set to outline: none by default. This is so that focused elements can be styled to match the design language of your project in a separate stylesheet. However, you are encouraged to remove this line of code from the reset if you don't plan on restyling focused elements.