https://github.com/nickrigby/silc-core
Core variables, mixins and functions for the silc framework
https://github.com/nickrigby/silc-core
sass typescript
Last synced: 2 months ago
JSON representation
Core variables, mixins and functions for the silc framework
- Host: GitHub
- URL: https://github.com/nickrigby/silc-core
- Owner: nickrigby
- License: mit
- Created: 2017-03-31T03:28:57.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-27T03:02:07.000Z (almost 8 years ago)
- Last Synced: 2025-01-11T02:12:42.877Z (4 months ago)
- Topics: sass, typescript
- Language: CSS
- Homepage: https://silc.io
- Size: 28.3 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# silc core [](https://travis-ci.org/nickrigby/silc-core) [](https://badge.fury.io/js/silc-core)
The core module contains a number of SASS variables/mixins/functions, and a JavaScript class for the silc framework.
## SASS functions
### em
Converts a pixel value into its `em` equivalent. Accepts a second "context" parameter, which is the context value to base the calculation on. The context parameter defaults to the value of `@silc-core--font-size`, which by default is `16px`.
```scss
em(16); // Returns 1em
em(16, 32); // Return 2em
```
### rem
Converts a pixel value into its `rem` equivalent. The context for `rem` calculations is the root (html) element font size, which defaults to the value of `@silc-core--font-size`.
```scss
rem(25); // Returns 1.5rem
```
### strip-unit
Strips units from a passed in string.
```scss
strip-unit(16px); // Returns 16
```
## SASS mixins
### media
Creates a media query based on a passed in breakpoint name, defined in `$silc-core--breakpoints`.
```scss
@include media('large') {
font-size: rem(20);
}
```
## SASS variables
A number of [SASS variables](src/scss/_variables.scss) are available to override. One particular variable to pay attention to is the `$silc-core--breakpoints` variable. The breakpoints variable allows you to create your own named breakpoints, which will then be used when using other silc modules like [silc-grid](https://github.com/nickrigby/silc-grid).
## JavaScript class
The `SilcCore` class adds a `js` class to the body element, which can then be used to progressively enhance your styles.