planckcss

A minimal css framework based on milligram and flexbox grid2. 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)

<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/planckcss.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/extension_form.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/extension_spacing.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/extension_colors.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/extension_toggle.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/extension_display.css" rel="stylesheet">

OR Import

<link href="https://cdn.jsdelivr.net/gh/harish81/planckcss@<version>/docs/dist/planckcss.bundle.css" rel="stylesheet">

Examples & Docs

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

How to contribute?

Planckcss is made of scss. We use 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 - A minimalist CSS framework.
• flexboxgrid2 - Bootstrap like grid based on css flexbox, An original author flexboxgrid.
• Bootstrap