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.
- 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
- Well documented and clean code
Work in progress
This is a WIP and not ready for use in production.
Detailed documentation will follow.
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:
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.jsonwill 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 (
- Output CSS file: This is the compiled output CSS file. It should be located somewhere inside the public path.
- 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: