mni

mni (as in "mini") is a mostly unopinionated SCSS and JavaScript framework built with simplicity and efficiency in mind.

The main goal of mni is to eliminate unnecessary bloat caused by using conventional frameworks (like Bootstrap) while still providing plenty of common features. This is achieved by a highly modular architecture that encourages you, the developer, to use only what you need.

mni is meant to be used as a base library for you to extend on and not a "plug-and-play" production-ready solution.

Features

• Minimal styling by default so you don't waste time overriding vendor styles
• Interactive CLI setup tool with integrated support for Laravel projects
• Easy configuration and compilation via Laravel Mix (even without Laravel!)
• Out-of-the-box integration of Autoprefixer, clean-css and Modernizr
• Mobile-first and responsive styling
• Plenty of common features you know and love like a sophisticated grid system, responsive navigation bars, buttons, lightweight and mobile-ready lazy loading and lightboxes for images, and many more
• JavaScript components as ES6 modules
• Well documented and clean code

Work in progress

This is a WIP and not ready for use in production.

Detailed documentation will follow.

Please use npm run docs to generate a sassdoc documentation page in the meantime.

Installation and setup

First, navigate to the root of your project and run:

npm i mni

After mni and its dependencies were installed successfully, run the setup:

mni setup

The setup will ask you to choose the desired paths for the source and destination files and create a boilerplate for your project:

• Public path (location of mix-manifest.json): This is the directory for the compiled stylesheets and scripts that is publicly available. This is also where the mix-manifest.json will be created when compiling.
• Source Sass/SCSS file: This is the main entry point of your stylesheets. It will already contain imports of everything that mni has to offer. You can choose if you want to use the SCSS or Sass syntax by giving this file the corresponding file extension (.scss/.sass).
• Output CSS file: This is the compiled output CSS file. It should be located somewhere inside the public path.
• Source JS file: This is the main entry point of your JavaScripts. It will already contain imports of every available mni ES6 module.
• Output JS file: This is the compiled output JS file. It should be located somewhere inside the public path.

If you run the setup in the root directory of a Laravel project, the setup will detect that and suggest the default Laravel paths so you can just press ↵ Enter.

The setup will generate a custom webpack.mix.js config file based on your inputs that is used by Laravel Mix for the compilation of your project.

Furthermore, the setup script will create these utility files if they don't already exist:

• .browserlistrc: This contains a browserslist that will be used by Autoprefixer
• .modernizrrc: The configuration file for your project's Modernizr builds