sagira-jss

sagira-jss

this is not ready yet, don't use it!

A jss basic framework with a simple flexbox grid, based on FlexboxGrid and a smart media query selector.

@TODO

• archteture analysis;
• massive refactoring;
• tests;
• unity tests;
• performance;

myStylesheetWithJSS.js

const Sagira = require('../index.js');

const sagira = new Sagira({
  horizontal: { xs: 350 },
  vertical: { ph: 720 }
});

const { auto, vw, rem, vh } = Sagira;

const stylesheet = {
  myComponentZero: auto(
    {
      padding: [12, '22px', `${vw(10)}`, 22],
      margin: 21
    },
    {
      color: 'blue',
      display: 'none',
      width: `${vh(10, 'xs')}`,
      border: `${vh(1, 'xs')} solid #ddaaff`,
      [sagira.query.th]: {
        padding: rem(22)
      },
      '&:hover': {
        color: 'red'
      },
      '&:after': {
        content: '"after-effects"'
      }
    }
  )
};

sagira.mixStyleSheet(stylesheet);
sagira.toString();
sagira.getRegistry();