https://github.com/nickrigby/silc-utilities
https://github.com/nickrigby/silc-utilities
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nickrigby/silc-utilities
- Owner: nickrigby
- License: mit
- Created: 2017-06-05T01:11:20.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T03:27:31.000Z (over 6 years ago)
- Last Synced: 2025-02-11T18:06:33.167Z (3 months ago)
- Language: CSS
- Size: 22.5 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# silc utilites [](https://badge.fury.io/js/silc-utilities)
The utilities module is a small web component for the [silc framework](https://silc.io).
## Display
Display elements, globally, or at specific breakpoints.
```html
Display block at all screen sizes
```
### Modifiers
Elements can be displayed at specific breakpoints using modifier classes in the `silc-display--{display-type}-{breakpoint}` format e.g.
```html
Display none at all screen sizes
Display inline at small screen sizes and above
```
### Variables
Display types can be configured via the `$silc-utilities--display-types` variable. By default, the following display types are defined:
```scss
$silc-utilities--display-types: (
'block',
'inline',
'inline-block',
'flex',
'none'
) !default;
```
## Text alignment
Align text, globally, or at specific breakpoints
```html
Align initial (left) at all screen sizes
```
### Modifiers
Text can be aligned at specific breakpoints using modifier classes in the `silc-align--{alignment-type}-{breakpoint}` format e.g.
```html
Align right at all screen sizes
Align center at small screen sizes and above
```
### Variables
Display types can be configured via the `$silc-utilities--display-types` variable. By default, the following display types are defined:
```scss
$silc-utilities--alignment-types: (
'left',
'right',
'center',
'justify'
) !default;
```
## Margin
Add margin globally, to specific sides, and at specific breakpoints
```html
```
### Variables
Margin types can be configured via the `$silc-utilities--margin-types` variable. By default, the following margin types are defined:
```scss
$silc-utilities--margin-types: (
'top',
'right',
'bottom',
'left'
) !default;
```
Margin sizes can be configured via the `$silc-utilities--margin` variable. By default, the following margin sizes are defined:
```scss
$silc-utilities--margin: (
('0', '0'),
('auto', 'auto'),
('1', '.25rem'),
('2', '.5rem'),
('3', '.75rem'),
('4', '1rem')
) !default;
```
## Padding
Add padding globally, to specific sides, and at specific breakpoints
```html
```
### Variables
Padding types can be configured via the `$silc-utilities--padding-types` variable. By default, the following padding types are defined:
```scss
$silc-utilities--padding-types: (
'top',
'right',
'bottom',
'left'
) !default;
```
Padding sizes can be configured via the `$silc-utilities--padding` variable. By default, the following padding sizes are defined:
```scss
$silc-utilities--padding: (
('0', '0'),
('1', '.25rem'),
('2', '.5rem'),
('3', '.75rem'),
('4', '1rem')
) !default;
```
## Colors
Add color and background color
```html
```
### Variables
Color and background colors can be configured via the `$silc-utilities--colors` variable. By default, the following colors are defined:
```scss
$silc-utilities--colors: (
('primary', '#369'),
('secondary', '#4E7DAB'),
('tertiary', '#7BA3CA'),
('white', '#fff'),
('black', '#000')
) !default;
```