https://github.com/wiledal/tusg

https://github.com/wiledal/tusg

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/wiledal/tusg
• Owner: wiledal
• Created: 2021-02-11T08:18:37.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-11T20:12:45.000Z (almost 4 years ago)
• Last Synced: 2024-10-16T19:47:58.520Z (3 months ago)
• Language: SCSS
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
TUSG

The Ultimate SCSS Grid


Creates global grid utility classes to be used to create powerful grid layouts in your project.

- 2kb gzipped (with default settings) 📦

- fully customizable ⚙️

- responsive columns ✨

- responsive gutter widths 🌈

Inititation:

```scss

// in your global.scss

@import "~tusg/tusg.scss";

// tusg-config:

// [size-name] [breakpoint] [gutter-width]

$tusg-config: (

  xl 1240px 40px,

  lg 1024px 32px.

  md 768px 24px,

  sm 480px 16px

);

@include tusg($tusg-config, 12); // initiate with breakpoints and 12 columns

```

Basic usage:

```html



  


  




```


Grids within grids:

```html



  


    This container is 6 columns on the main grid.


    


      


        This container is 4 columns on the main grid.

      

    

  



```