0-plume-css

A tiny framework for sass/css artisans

Usage no npm install needed!

<script type="module">
  import PlumeCss from 'https://cdn.skypack.dev/0-plume-css';
</script>

README

Plume CSS - a tiny framework for css artisans

Introduction

The goal of this library is to get a base that include a grid system, some helpers and the maximum of compatibilities with old scool browsers.

Quick start

  • Include from jsDelivr CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/0kyn/plume-css/dist/css/plume.min.css">

Development

  • Clone the repository
git clone https://github.com/0kyn/plume-css.git my-project 

cd my-project
  • Watching for changes
npm run dev

Production

Build assets for production

npm run prod

Docs

Plume CSS is mobile first, breakpoints are defined as Bootstrap ones :

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Grid system (12 columns) works in the same way

<div class="plume-grid">
  <div class="row">
    <div class="col-6">50%</div>
    <div class="col-6">50%</div>
  </div>

  <div class="row">
    <div class="col-3">25%</div>
    <!-- 75% -->
    <div class="col-9">
      <div class="row">
        <div class="col-6">50% of 75%</div>
        <div class="col-6">50% of 75%</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
  </div>
</div>

This grid system is based on float that makes it compatible with old browsers.

Helpers

  • center a single column in a row
<div class="row">
  <div class="col-4 col-center">~33.3% centered column</div>
</div>
  • hide a column at a specific breakpoint
<div class="row">
  <div class="col-12 hide-xl">column hidden on laptop(>1200px)</div>
</div>
  • show a column only for a specific breakpoint
<div class="row">
  <div class="col-12 show-xl">column only visible on laptop(>1200px)</div>
</div>
  • miscellaneous
    You'll find various helpers in src/scss/base/helpers.scss