https://github.com/ikeohachidi/kwik-css

https://github.com/ikeohachidi/kwik-css

bootstrap css sass scss tailwind

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ikeohachidi/kwik-css
• Owner: ikeohachidi
• Created: 2021-12-10T15:22:05.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-10T20:11:21.000Z (11 months ago)
• Last Synced: 2024-11-07T21:11:34.935Z (about 2 months ago)
• Topics: bootstrap, css, sass, scss, tailwind
• Language: SCSS
• Homepage:
• Size: 17.6 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# kwik-css

The minimal css classes needed to get started with most projects in my opinion.

Not supposed to be an alternative to Tailwind or Bootstrap but can be used when you just some utility classes and will most likely write most of your styles yourself.

### Installation

**NPM**

```shell

npm i kwik-css

```

**Usage**

```javascript

import 'kwik-css/kwik.css';

```

**Padding**

```css

.p-

.pt-

.pr-

.pb-

.pl-

```

Ranges from 0 to 5 with values all in `em`

**Margin**

```css

.m-

.my-auto

.mx-auto

.mt-auto

.mb-auto

.ml-auto

.mr-auto

.mt-

.mr-

.mb-

.ml-

```

Ranges from 0 to 5 with values all in `em`

**Display**

```css

.block

.inline-block

.flex

/* should be used with flex */

.column

.row

.grow /*flex-grow: 1*/

.center /* center items */

.wrap

.jc-center /* justify-content: center */

.jc-between /* justify-content: space-between */

.jc-evenly /* justify-content: space-evenly */

/* align-items */

.items-start

.items-center

.items-end

```

**Positioning**

```css

.fixed

.absolute

.relative

.top-0

.left-0

.right-0

.bottom-0

```