https://github.com/grabss/grabcss

A minimal, utility-first CSS framework for rapid UI development.
https://github.com/grabss/grabcss

css css-framework minimal postcss utility-first

Last synced: 2 months ago
JSON representation

A minimal, utility-first CSS framework for rapid UI development.

• Host: GitHub
• URL: https://github.com/grabss/grabcss
• Owner: grabss
• License: mit
• Created: 2024-10-16T00:37:39.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-25T08:14:35.000Z (3 months ago)
• Last Synced: 2024-10-26T14:20:29.026Z (3 months ago)
• Topics: css, css-framework, minimal, postcss, utility-first
• Language: SCSS
• Homepage: https://grabss.co.jp
• Size: 34.2 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  



grabcss




  A minimal, utility-first CSS framework for rapid UI development.





  

  



---

## Installation

```console

npm i grabcss

```

## How to use

Using built CSS

```js

import "grabcss";

// Alternatively, you can import only the CSS file

// import "grabcss/grab.css";

```

Using SCSS

```scss

@use "grabcss/scss/mediaquery" as mediaquery;

@use "grabcss/scss/variables" as variables;

@use "grabcss/scss/utilities";

```

Using SCSS with customized variables

```scss

@use "grabcss/scss/mediaquery" as mediaquery;

@use "path/to/your-customized-variables" as variables;

@use "grabcss/scss/utilities";

```

```scss

// path/to/your-customized-variable.scss

@use "sass:map";

@use "grabcss/scss/variables" as variables with (

  // overrides

  $color-primary: #00a596

);

// additions

$color-light-border: #dce1e6;

$colors: map.merge(

  variables.$colors,

  (

    "light-border": $color-light-border,

  )

);

@forward "grabcss/scss/variables";

```