Package Exports

flexi-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flexi-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

flexi-js

A lightweight CSS blocking system, designed to be simple. This has been designed only to provide a few common things, while simplifying the box model, and some some common pitfalls that everyone falls into when trying to design a Responsive site.

Installation

npm install

Using - PreCompiled css

node_modules/flexi-js/build/all.css

Note: we will likely create built standalone versions for each file, and minify them.

Using - SCSS

@import 'node_modules/flexi-js/all' - imports the full suite

Or, if you don't want everything, you can import the individual pieces that you want to include. Any of the non _ prefixed files will pull in their dependencies.

@import 'node_modules/flexi-js/flex'`

The following are available to load individually:

container .container
flexi .flexi, all flexbox related rules
headings h1:h6
modal .modal (will require JS)
offset .shift, .push, .squish

Using - Javascript

To use the optional JS stuff (Collapse, Modal)

var flexijs = require('flexi-js')

// ...

// auto run when window loads
window.addEventListener('load', flexijs);

// OR, to call immediately if the window is ready..
flexijs();

don't have require available? Here's my current ghetto rig to get the example page up:

<html>
  <head>
  <script>
    window.module = {};
  </script>
  <script src="node_modules/flexi-js/index.js"></script>
  <script>
    window.addEventListener('load', module.exports);
  </script>
  ...

Once the dust settles, and the features are mostly established, we'll likely refactor the JS, to fix the obviously hacky code, and provide a few more end points for various things (eg, AMD friendly)

Todo:

fix our description
create a MUCH better example/tutorial/manual page
add testing
add documentation on usage
text-align ?

Commands:

npm run build
npm run watch
npm run debug:build
npm run debug:watch (this isnt working for some dumb reason...)