Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/maximilianheidenreich/grit.css

A simple and extremely lightweight collection of classes for quickly building responsive web layouts targeting mobile and desktop experiences.
https://github.com/maximilianheidenreich/grit.css
css css-framework css-grid less webdev
Last synced: about 1 month ago
JSON representation
A simple and extremely lightweight collection of classes for quickly building responsive web layouts targeting mobile and desktop experiences.
Host: GitHub
URL: https://github.com/maximilianheidenreich/grit.css
Owner: MaximilianHeidenreich
License: mit
Created: 2022-01-12T07:34:11.000Z (almost 3 years ago)
Default Branch: master
Last Pushed: 2022-01-24T02:28:20.000Z (almost 3 years ago)
Last Synced: 2024-10-13T13:39:10.966Z (2 months ago)
Topics: css, css-framework, css-grid, less, webdev
Language: Less
Homepage:
Size: 1.72 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        

[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]

[![GPLv3 License][license-shield]][license-url]

[contributors-shield]: https://img.shields.io/github/contributors/MaximilianHeidenreich/grit.css.svg?style=flat-square

[contributors-url]: https://github.com/MaximilianHeidenreich/grit.css/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/MaximilianHeidenreich/grit.css?style=flat-square

[forks-url]: https://github.com/MaximilianHeidenreich/grit.css/network

[stars-shield]: https://img.shields.io/github/stars/MaximilianHeidenreich/grit.css?style=flat-square

[stars-url]: https://github.com/MaximilianHeidenreich/grit.css/stargazers

[issues-shield]: https://img.shields.io/github/issues/MaximilianHeidenreich/grit.css?style=flat-square

[issues-url]: https://github.com/MaximilianHeidenreich/grit.css/issues

[license-shield]: https://img.shields.io/github/license/MaximilianHeidenreich/grit.css?style=flat-square

[license-url]: https://github.com/MaximilianHeidenreich/grit.css/blob/master/LICENSE






  

    

  

---



    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

- [Table of Contents](#table-of-contents)

- [About The Project](#about-the-project)

  - [Features](#features)

- [Usage](#usage)

  - [Load fom CDN](#load-fom-cdn)

  - [Host yourself](#host-yourself)

- [Concept / How it works](#concept--how-it-works)

  - [Terminology](#terminology)

    - [Grit](#grit)

    - [Root grit](#root-grit)

    - [Subgrit](#subgrit)

  - [What? Why? How?](#what-why-how)

- [Classes Docs](#classes-docs)

  - [Helpers](#helpers)

    - [.only-mobile](#only-mobile)

    - [.only-tablet](#only-tablet)

  - [Grit root class](#grit-root-class)

    - [.grit](#grit-1)

    - [.grit-x](#grit-x)

    - [.md-grit-x](#md-grit-x)

  - [.subgrit](#subgrit-1)

  - [Grit padding](#grit-padding)

    - [.grt-p-x](#grt-p-x)

    - [.md-grt-p-x](#md-grt-p-x)

    - [.grt-p-a-b](#grt-p-a-b)

    - [.md-grt-p-a-b](#md-grt-p-a-b)

  - [Grit wrapper](#grit-wrapper)

    - [.grit-wrapper-sm](#grit-wrapper-sm)

    - [.grit-wrapper-md](#grit-wrapper-md)

    - [.grit-wrapper](#grit-wrapper-1)

    - [.grit-wrapper-xl](#grit-wrapper-xl)

  - [Grit content](#grit-content)

    - [.content](#content)

    - [.content-x](#content-x)

    - [.md-content-x](#md-content-x)

  - [Overlay content](#overlay-content)

    - [.overlay-x](#overlay-x)

    - [.sm-overlay-(2,3)](#sm-overlay-23)

    - [.md-overlay-(2,3)](#md-overlay-23)

  - [Grit content position](#grit-content-position)

    - [.grt-center](#grt-center)

    - [.md-grt-center](#md-grt-center)

    - [.grt-a-b](#grt-a-b)

    - [.md-grt-a-b](#md-grt-a-b)

  - [Grit content width](#grit-content-width)

    - [.grt-fill](#grt-fill)

    - [.md-grt-fill](#md-grt-fill)

    - [.grt-full](#grt-full)

    - [.md-grt-full](#md-grt-full)

- [Contributing](#contributing)

- [Todo](#todo)

- [Contact](#contact)

## 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

-   [x] Easy & Fast to use

-   [x] Responsive by default

-   [x] Supports multiple grit sizes

-   [x] Subgrits for layouts of nested elements

-   [x] Overlapping grits for stacking layouts




## Usage

### Load fom CDN

```html

    ...

    

    ...

```

### 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 - [email protected]

Project Link: [https://github.com/MaximilianHeidenreich/grit.css](https://github.com/MaximilianHeidenreich/grit.css)

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