https://github.com/outl1ne/core-scss
This is a SCSS partial that provides some utility mixins and default styles that fit our workflow.
https://github.com/outl1ne/core-scss
Last synced: about 2 months ago
JSON representation
This is a SCSS partial that provides some utility mixins and default styles that fit our workflow.
- Host: GitHub
- URL: https://github.com/outl1ne/core-scss
- Owner: outl1ne
- License: mit
- Created: 2016-09-23T13:15:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-17T11:50:12.000Z (about 6 years ago)
- Last Synced: 2025-03-24T06:05:01.466Z (2 months ago)
- Language: CSS
- Size: 11.7 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Optimist Digital | Core SCSS
This is a SCSS partial that provides some utility mixins and default styles that fit our workflow.
Some of the partials utilize variables that you may define in your project before including these partials. If not defined, we define defaults in `partials/_default-config.scss`.
## Usage
Add `@import "node_modules/@optimistdigital/core-scss/core";` before your component mixins, after your variable definitions.
## Features
### Config
We set some default variables that are used in core and that you can use in your code. You can override them by defining them yourself *before* including core.
- `$global-site-maxwidth` - Used mainly for maxwidth-wrapper
- `$global-site-side-padding` - Used mainly for maxwidth-wrapper
- `$bp-tablet` - Min width (px) for tablets
- `$bp-mobile` - Min width (px) for mobile devices
- `$color-bg` - Main background color
- `$color-fg` - Main foreground (text) color
- `$body-font-size` - Main body size
- `$font-body` - Main font for body text
- `$font-heading` - Main font for headings
### Mixins
The exact purpose of each mixin is explained in `_core.scss`. Other than the default styles, Here are the mixins that we provide:
- `@mixin clearfix()`
- `@mixin ellipsis()`
- `@mixin body-font()`
- `@mixin heading-font()`
- `@mixin maxwidth-wrapper()`
- `@mixin reset-list()`
- `@mixin bp($width)`
- `@mixin minbp($width)`
### Grid layout
We have helper classes for a basic grid (no gutters).
Add `.cols-25` / `.cols-33` / `.cols-50` to add widths to your cols. Leave them out if you want to implement custom widths.
Add `.with-breakpoints` if you want the grid items to fall back to 100% with at predetermined breakpoints. Leave that class out if you want to implement custom breakpoints. Example:
```
```