# basics.scss

> Basics.scss is a micro util library with the most often used classes.

Latest version **0.1.2** (published 2019-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install basics.scss
pnpm add basics.scss
yarn add basics.scss
bun add basics.scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-04-03 |
| First published | 2019-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 105.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | kakuevn |
| Maintainers | kakuevn |
| Keywords | css, sass, scss, front-end, library, flexbox, util |

## Links

- npm: https://www.npmjs.com/package/basics.scss
- Repository: https://github.com/kakuevn/Basics.scss
- Homepage: https://github.com/kakuevn/Basics.scss#readme
- Issues: https://github.com/kakuevn/Basics.scss/issues
- npm.io page: https://npm.io/package/basics.scss

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2019-04-03
- 0.1.1 — 2019-04-03
- 0.1.0 — 2019-04-03

## README

# Basics.scss

Basics.scss is a micro util library with the most often used classes.

## Getting started

Import basics.css file into your `.js` file directly

```
import "basics.scss/dist/basics.css";
```

Or import it into your `.scss`, `.sass` or `.styl` file

```
@import "node_modules/basics.scss/dist/basics.css";
```

## Variables

You can change variables to customise distance, size, and color. 

```
// Used for fonts
$fontReg: 1em;
$fontSm: 0.8em;
$fontLg: 1.5em;
$fontXl: 2em;
$fontSlim: 300;
$fontMed: 400;
$fontBold: 600;
$fontXBold: 700;

// Base white color
$colorWhite: #fff;

// Used for margins and paddings
$distanceSm: 0.5em;
$distanceMd: 1em;
$distanceLg: 2em;
$distanceXl: 4em;
```

For that, you need to import basics-custom.scss file that has no vars:

```
@import 'your-vars-file.scss';
@import "node_modules/basics.scss/src/basics-custom.scss";
```

## Docs

### Flexbox

`flex` - display flex

`flex-start` - justify-content: flex-start

`flex-center` - justify-content: center

`flex-end` - justify-content: flex-end

`flex-between` - justify-content: space-between

`flex-around` - justify-content: space-around

`flex-top` - align-items: flex-start

`flex-middle` - align-items: center

`flex-bottom` - align-items: flex-end

`flex-stretch` - align-items: stretch

`flex-column` - flex-direction: column

`flex-wrap` - flex-wrap: wrap

`flex-{1-3}` - flex-grow: {1-3}, e.g. `flex-1` would be `{ flex-grow: 1; }`

`self-start` - flex-start

`self-center` - align-self: center

`self-end` - align-self: flex-end

### Margins and Paddings

Margins and paddings work in the same principle `{margin|padding}-{side}-{size}`, where `{side}` is optional if you want to set the same margin/padding on all sides.

`{side}` can be one of `top`, `right`, `bottom`, or `left`.

`{size}` has `sm`, `md`, `lg`, and `xl`. Those can be customized with your own sizes.

So you'd use it in this way

```
<div class="margin-top-md">...</div>
<div class="margin-bottom-lg">...</div>

<p class="padding-left-sm">...</p>
<p class="padding-right-xl">...</p>

<span class="margin-sm">...</span> // sets margin: $sm;
<span class="margin-auto">...</span> // sets margin for left and right as auto
```

There are also zero margin and padding classes that set either all or one of the sides to `0`. They are structured as `no-{margin|padding}-{side}`, where `{side}` is optional. So that would be

```
<div class="no-margin">...</div> // sets margin: 0
<div class="no-padding-left">...</div> // sets padding-left: 0
<div class="no-margin-top">...</div> // sets margin-top: 0
```

### Text

All the style changes that can be done with text are prefixed with `text-`, i.e.

```
text-underline // sets text-decoration: underline;
text-slim // sets font-weight: $fontSlim;
text-medium // sets font-weight: $fontMed;
text-bold // font-weight: $fontBold;
text-xbold // sets font-weight: $fontXBold;
text-center // sets text-align: center;
text-right // sets text-align: right;
text-uppercase // sets text-transform: uppercase;
text-lowercase // sets text-transform: lowercase;
text-sm // sets font-size: $fontSm;
text-regular // sets font-size: $fontReg;
text-lg // sets font-size: $fontLg;
text-xl // sets font-size: $fontXl;
text-italic // font-style: italic;
text-white // sets color: $colorWhite !important;
```

### Other

There are few more classes, similar to bootstrap that help with positioning of things on the page.

`clear-{side}` - sets clear on either of the sides or both, e.g. `clear-both` will be `clear:both`

`pos-{absolute|relative}` - sets `positioning` either absolute or relative, e.g. `pos-absolute`

`no-list` - sets `list-style: none` and `padding-left: 0`. Used for `ul` or `li` elements.

Designed and built by [Nikita K.](https://kakuev.com/). Feel free to submit a pull request. Help is always appreciated.

---
_Source: https://npm.io/package/basics.scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._