paradigm-base

Paradigm framework flexbox core features

Usage no npm install needed!

<script type="module">
  import paradigmBase from 'https://cdn.skypack.dev/paradigm-base';
</script>

README

this is a Paradigm framework flexbox grid module use it to markdown with BEM model

reset

_reset.scss — reset a basic css styles

aviable mixins

pContainer($breakpoint) — flexbox container with breakpoints support


pMediaQueryUp($breakpoint) — Mobile first Query mixin
pMediaQueryBetween($lower, $upper) — between $lower and $upper Query mixin
pMediaQueryDown($breakpoint) — between Query mixin


pRow — Create a flexbox row grid system
pCol($size) — Create a column in a row container with size 1 to 12 blocks by defaul 12 col grid

defaults

$pBreakpoints: (
xs: 240,
sm: 480px,
md: 768px,
lg: 1024px,
xl: 1280px,
) !default;

$pContainerMaxWidths: (
xs: 200px,
sm: 420px,
md: 720px,
lg: 960px,
xl: 1200px,
) !default;

$pGridColumns: 12 !default;
$pGridGutterWidth: 20px !default;