gritcss

A simple and extremely lightweight collection of CSS classes for quickly building robust, responsive web layouts targeting mobile and desktop experiences.

Usage no npm install needed!

<script type="module">
  import gritcss from 'https://cdn.skypack.dev/gritcss';
</script>

README

Contributors Forks Stargazers Issues GPLv3 License


Grit logo

A simple and extremely lightweight collection of CSS classes for quickly building responsive web layouts targeting mobile and desktop experiences.
Only 140kb in size.
Explore the docs »

Report Bug · Request Feature

Table of Contents

About The Project

This grid "framework" (it's really just a few generated classes) can be used to easily layout elements on a webpage. It is responsive by default, allowing developers to design for "mobile-first" and update the layout for desktop viewports. The default classes are opinionated to suit my personal needs - should still be useful for most use-cases -, and you can override the default layout using additional classes. View the docs for more information!

I created this project because I needed a small solid grid system for some web layouts. I didn't want to use bootstrap or other big frameworks (Also it just was fun to write).

Feel free to contribute to it if you have some cool suggestions.

Features

  • Easy & Fast to use
  • Responsive by default
  • Supports multiple grit sizes
  • Subgrits for layouts of nested elements
  • Overlapping grits for stacking layouts

Usage

Load fom CDN

<head>
    ...
    <link
        rel="stylesheet"
        href="https://unpkg.com/grit.css/dist/grit.css"
        type="text/css"
    />
    ...
</head>

Host yourself

todo

-> Visit the /examples folder for usage examples.

-> Visit the Docs to learn how to use grit.

Concept / How it works

Terminology

Grit

A "grit" is basically an element using the CSS display: grid property in addition to some additional stuff that makes nesting & other helper classes possible.

Root grit

A "Root grit" is the topmost element with the .grit or .grit-x or .md-grit-x classes. The configuration (padding) of this grit will be inherited by all child elements using the .subgrit class.

Subgrit

A "Subgrit" usually referrs to an element with the .subgrit class.

What? Why? How?

The fundamental idea behind this system is that, you define one grit size for your page (on mobile & >= tablet viewports). After that, you can use helper classes to horizontally position child elements on the grit.

Vertical layout is not handled by the grit because of reasons :) But basically thats not what this project's goal is.

It is also possible to position elements which are nested multiple levels deep. For this, you can use the .subgrit class on each element between the root grit and target element which you want to position. This will make the elements in between stretch to the whole width so that grit column sizes do not differ.

! Due to this layout concept, you need to separate vertical elements which should be positioned differently on the grit (See hero example) !

Classes Docs

Inside the following documentation, mobile viewport referrs to a width < 768px and tablet to > 768px!

Helpers

.only-mobile

Hides the element on viewports largen than tablet breakpoint.

.only-tablet

Hides the element on viewports smaller than tablet breakpoint.

Grit root class

.grit

Makes an element a grit using the opinionated default size (mobile: 12 columns, >= tablet: 32 columns).

.grit-x

Makes an element a grit using the provided x (min: 2, max: 12) as column count for mobile viewports.

.md-grit-x

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grit-x

.subgrit

! Needs to be a child of a .grit element (Not necessarily a direct child).

Makes an element a grit itself but inherits the outer grit settings.

Grit padding

.grt-p-x

Sets the grits left & right padding to x (min: 0, max: 15). These padding columns will remain empty when using .grt-fill & .md-grt-fill.

.md-grt-p-x

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-p-x

.grt-p-a-b

Sets the grits left padding to a and right padding to b (Values summed cannot exceed total column count).

.md-grt-p-a-b

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-p-a-b

Grit wrapper

! Need to be a parent of the root grit !

.grit-wrapper-sm

Applies a max-width of 320px to the element.

.grit-wrapper-md

Applies a max-width of 768px to the element.

.grit-wrapper

Applies a max-width of 1200px to the element.

.grit-wrapper-xl

Applies a max-width of 1680px to the element.

Grit content

.content

!TODO: Deprecate

.content-x

Makes the element span the full width after subtracting x amount of columns left and right.

.md-content-x

! Only applies to viewports >= tablet breakpoint !

Same functionality as .content-x

Overlay content

.overlay-x

TODO: Fix docs

! The .overlay class will be applied at any viewport width. Use ...-sm or ...-md to only overlay inside a specific viewport width !

Sets the grid-row property to 1. This is useful when the class is added to multiple elements inside the same grit parent. Inside the individual children, one can position elements individually, but the overlays will be displayed stacked.

-> Visit the Docs to learn how to use the .overlay class.

.sm-overlay-(2,3)

! Only applies to viewports <=> tablet breakpoint !

Same functionality as .content-x

.md-overlay-(2,3)

! Only applies to viewports >= tablet breakpoint !

Same functionality as .content-x

Grit content position

.grt-center

! a needs to be smaller than b !

Makes the element span the full width minus left & right padding and applies the display: flex property to center children.

.md-grt-center

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-center

.grt-a-b

! a needs to be smaller than b !

Makes the element span the given columns defined by a (min: 1, max: grit columns count) and b (min: 1, max: grit columns count)

.md-grt-a-b

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-a-b

Grit content width

.grt-fill

Will make the element fill the whole available width, whilst enforcing the padding used by the grit.

.md-grt-fill

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-fill

.grt-full

Will make the element fill the whole available width, ignoring any padding used by the grit.

.md-grt-full

! Only applies to viewports >= tablet breakpoint !

Same functionality as .grt-full

Contributing

Feel free to contribute to this project if you find something that is missing or can be optimized. I want to retain the original vision of a simple yet usable library, so please keep that in mind when proposing new features. If you do so, please follow the following steps:

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Todo

  • Add cool layout images
  • Add layout example
  • Finish demo page

Contact

Maximilian Heidenreich - github@maximilian-heidenreich.de

Project Link: https://github.com/MaximilianHeidenreich/grit.css

Project Icon: https://github.com/MaximilianHeidenreich/grit.css/blob/master/assets/GRIT-logo-large.png