https://github.com/harish81/planckcss

A minimal css framework based on miligram and flexbox grid.
https://github.com/harish81/planckcss

css flexbox grid lightweight miligram

Last synced: 5 days ago
JSON representation

A minimal css framework based on miligram and flexbox grid.

• Host: GitHub
• URL: https://github.com/harish81/planckcss
• Owner: harish81
• Created: 2020-05-03T10:54:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T11:15:12.000Z (about 2 years ago)
• Last Synced: 2024-05-01T21:41:00.416Z (8 months ago)
• Topics: css, flexbox, grid, lightweight, miligram
• Language: CSS
• Homepage: https://harish81.github.io/planckcss/
• Size: 185 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
  


# planckcss

![version](https://img.shields.io/github/v/release/harish81/planckcss?include_prereleases&label=version)

![commit](https://img.shields.io/github/last-commit/harish81/planckcss)

![core size](https://img.shields.io/github/size/harish81/planckcss/docs/dist/planckcss.css?label=core)

![bundle size](https://img.shields.io/github/size/harish81/planckcss/docs/dist/planckcss.bundle.css?label=bundle)

A minimal css framework based on [milligram](https://github.com/milligram/milligram) and [flexbox grid2](https://github.com/evgenyrodionov/flexboxgrid2).

Planckcss is ~19 kb (Core) & ~35 kb (Bundle of all extensions).

Planckcss made using only css. All components are made of only using just css. There is no javascript at all.

Planckcss is extension based framework. You can use extension only if needed.

## How to use?([CDNs](https://www.jsdelivr.com/package/gh/harish81/planckcss))

```html

```

OR Import

```html

```

## Examples & Docs

https://harish81.github.io/planckcss/

## How to contribute?

Planckcss is made of `scss`. We use [laravel-mix](https://github.com/JeffreyWay/laravel-mix) to 

bundle our css. 

1. Clone repo.

2. `npm install`

3. Make changes to scss files in `src` directory.

4. Add Section to `docs/index.html`

5. Compile to css using `npm run dev`

6. Generate production minified css `npm run prod` 

## Inspiration

- [Milligram](https://milligram.io/) - A minimalist CSS framework.

- [flexboxgrid2](https://github.com/evgenyrodionov/flexboxgrid2) - Bootstrap like grid based on css flexbox,

An original author [flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid). 

- [Bootstrap](https://getbootstrap.com/)