surge-css

Simple, Responsive, Grids

Usage no npm install needed!

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

README

Surge CSS

Simple, Responsive, Grids


Get it

  1. Install with NPM:
npm install surge-css
  1. Download from Gitlab:
git clone https://gitlab.com/rockerest/surge-css

Use it

  1. Make a grid container:
<div class="surge-grid">
</div>
  1. Put some columns in it:
<div class="surge-grid">
   <div class="surge-column-1/4">
       A quarter column
   </div>
</div>
  1. Design mobile-first, and add responsive columns:
<div class="surge-grid">
   <div class="surge-column-1 surge-column-tablet-1/2 surge-column-desktop-1/4">
       A responsive column
   </div>
</div>

Customize it

  1. Add a vendor variable overrides file to the beginning of your sass build pipeline
  2. Override some variables
$surge-name: "jim";
$surge-separator: "|";
$surge-column-name: "tower";
$surge-grid-name: "squares";
  1. @import surge-css/src/scss/surge.scss into your sass build pipeline
  2. Write your grids like a boss:
<div class="jim|squares">
   <div class="jim|tower|1 jim|tower|tablet|1/2 jim|tower|desktop|1/4">
       A responsive column
   </div>
</div>

Find more info about it

The real documentation

Report a problem with it

Submit an issue at the Gitlab issue tracker