Easy mobile-first CSS layout Framework

Because responsive web layouts should be easy. Daggr focuses on simple layout utility classes and sensible defaults. Based on Centric.css, almost every element is centered by default. Not to mention it's super lightweight at only 4kb gzipped!
Fork it on Github!
Daggr's philosophy is simple. Make layouts easy.

Everything is mobile-first and centered by default. Changing setting, such as a columns width for desktop is as simple as using desktop-col-3. Only 1 breakpoint is used. This simplifies the process of building complex responsive layouts because you only have to think about 2 sizes.

Most ustilities can be prefixed with the desktop breakpoint. Imagine only building for 2 sizes - mobile and desktop, rather than multiple breakpoints. Simple.

Separation of Layout & Style

Unfortunately the line has been blurred between HTML's job to handle layout and CSS's job to style. With Daggr I tried to create a CSS framework that only serves the purpose of providing responsive utilities to aid in page layout.

The style of the page(colors, animations, etc.) are your responsibility or the responsibility of another framework.

Documentation

Settings

The following CSS variables can be configured:

:root {
    --desktop-container-width: 70%;
    --mobile-font-size: 22pt;
    --indent-size: 1.5em;
}

Container

The container class restricts the maximum width of an element by the amount set in --desktop-container-width and is full-screen on mobile. Use it to wrap other elements.

Example: 
<div class="container">
    <div class="stays-in-container">

Spacing

Margins and padding classes can be formulated as follows:

Margins

m-(size | auto | none)
m(l,t,b,r)-(size | auto | none)
desktop-m-(size | auto | none)
desktop-m(l,t,b,r)-(size | auto | none)

Paddings

p-(size | auto | none)
p(l,t,b,r)-(size | auto | none)
desktop-p-(size | auto | none)
desktop-p(l,t,b,r)-(size | auto | none)

Where: l,t,b,r = left, top, bottom, right
and size is one of xs, sm, md, lg, xl.


Example: 
<div class="m-md mx-xs desktop-m-lg">
<div class="p-xl px-xs desktop-pr-sm">

Positions

The following position classes are available:

pos-abs, pos-rel, pos-sticky, pos-fixed
Example: 

<div class="pos-rel">
<div class="pos-abs">

display

The following display classes are available:

d-none, d-inline, d-block, d-iblock
With desktop versions:
desktop-d-none, desktop-d-inline, desktop-d-block, desktop-d-iblock

If you need something to appear only on desktop or mobile:
mobile-only, desktop-only

For setting Z depth:
z-(1-10), z-max, z-least


Example: 
<div class="d-iblock z-2">
<div class="desktop-only z-max">

Dimensions

Width and height are set in percentages using the following formula:
w-(10 - 100) in increments of 10 or desktop-w-(10 - 100) in increments of 10
h-(10-100) in increments of 10 or desktop-h-(10-100) in increments of 10

full-screen-width & full-screen-height set 100vw or 100vh - useful for hero or other full screen sections.


Example: 
<div class="w-100">
<div class="h-20 desktop-h-50">

Grid system

Daggr's grid system is very similar to Bootstrap's

The .row class creates a flex environment where child elements are the columns - up to 12 across.

row - creates a grid row
col-(1-12), desktop-col-(1-12)

If you need to change the order: order-(1-12), desktop-order-(1-12)
If you need to make sure a column appears first: order-first, desktop-order-first

You can also use .flex to create a flex element directly


Example: 
<div class="container row">
<div class="col-12 desktop-col-6 order-first">

Type

For alignment:
text-left, text-center, text-right

For text style: text-capitalize, text-upper, text-lower, italic, bold, bolder

Use .indent on paragraphs to get traditional indentation. The amount of indention is configurable via --indent-size.


Example: 
<div class="text-left text-capitalize">