https://github.com/vi-son/rouge

🎨 SASS/CSS library for everything related to vi · son — mixing senses
https://github.com/vi-son/rouge

branding sass-framework sass-mixins stylesheets

Last synced: about 1 month ago
JSON representation

🎨 SASS/CSS library for everything related to vi · son — mixing senses

• Host: GitHub
• URL: https://github.com/vi-son/rouge
• Owner: vi-son
• License: cc-by-4.0
• Created: 2020-04-15T19:16:12.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-02T09:22:18.000Z (over 3 years ago)
• Last Synced: 2024-10-16T17:03:52.673Z (3 months ago)
• Topics: branding, sass-framework, sass-mixins, stylesheets
• Language: Sass
• Homepage: https://mixing-senses.art
• Size: 228 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🎨 rouge

### Stylesheet library for [vi • son/mixing senses](https://mixing-senses.art) related projects

Either use this project as submodule or use the `@vi.son/rouge` package from npm

via:

`npm install @vi.son/rouge`

#### Base style + ITCSS structure

You can use the following ITCSS oriented stylesheet structure as a starting point:

```sass

$font-root: "@vi.son/rouge/fonts"

/* 1. Settings - variables, config-switches

@import @vi.son/rouge/1-settings/_colors.sass

@import @vi.son/rouge/1-settings/_fonts.sass

@import @vi.son/rouge/1-settings/_variables.sass

@import @vi.son/rouge/1-settings/_breakpoints.sass

@import @vi.son/rouge/1-settings/_typograhpy.sass

/*** 2. Tools - mixins and functions

@import @vi.son/rouge/2-tools/_responsive-font-size.sass

@import @vi.son/rouge/2-tools/_media-queries.sass

/* 3. Generic - ground-zero styling (normalize, reset)

@import @vi.son/rouge/3-generic/_reset.sass

/* 4. Base - unclassed HTML element styles

@import @vi.son/rouge/4-base/_button.sass

@import @vi.son/rouge/4-base/_document.sass

@import @vi.son/rouge/4-base/_headings.sass

@import @vi.son/rouge/4-base/_images.sass

@import @vi.son/rouge/4-base/_input.range.sass

@import @vi.son/rouge/4-base/_input.text.sass

@import @vi.son/rouge/4-base/_input.text.sass

@import @vi.son/rouge/4-base/_links.sass

@import @vi.son/rouge/4-base/_text.sass

/* 5. Objects - cosmetic-free design patterns

@import @vi.son/rouge/5-objects/_button.send.sass

@import @vi.son/rouge/5-objects/_btn.sass

@import @vi.son/rouge/5-objects/_emoji.sass

```