Magic-monkey NPM

Magic Monkey

What ?

Magic Monkey is a CSS library offering practical classes and a responsive grid based on Flexbox. You can check for the documentation inside the folder documentation.

Download

Get the Magic Monkey library on GitHub
Add the style sheet where you wish in your Web project
Charge it in your HTML page like this : (don't forget the meta tag !)

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href=".../path/to/magicmonkey.min.css" type="text/css">
  ...
</head>

Install with NPM or YARN

Magic Monkey can be installed thanks to NPM ( https://www.npmjs.com/package/magic-monkey ) :

npm install magic-monkey

#if yarn is not installed on your computer
npm install -g yarn

# add magic-monkey to your project
yarn add magic-monkey

##Install with Bower

Magic Monkey can be installed thanks to Bower :

bower install magic-monkey

Import with Webpack

You can import the style sheet in your javascript file :

ES6

import 'magic-monkey'

CommonJS

require('magic-monkey')

Reset CSS

I invite you to use a CSS reset such as Normalize.css ( there are others, I let you make your choice ). Why use a CSS reset ? It's simply because every web browser applies diffrent CSS properties by default to HTML tags.

Let us admit that the web browser Google Chrome applies 15 pixels of margin on the \ tag againt 10 pixels for the web browser Firefox (it's not a real example). In this case, the CSS reset will overload these default values and thus applies the same value of margin to the <\p> tag no matter the web browser.

To resume, your web application will almost present no more differences of display no matter the web browser used by the user. It's worth it !

It would thus give this :

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="...path/to/normalize.min.css" type="text/css">
  <link rel="stylesheet" href=".../path/to/magicmonkey.min.css" type="text/css">
  ...
</head>

Advices

Naming rule : distinguish the source of the classes

I had thought of integrating distinctive characters such as MM- ( MagicMonkey ) for every name of class of the library. The aim of this idea was too allow the library's user to quickly differentiate classes coming from Magic Monkey of those others within a HTML structure.

For example, we would have been able to have the following HTML structure :

<div class="MM-padding-50 MM-padding-5-xs MM-align-center user-class">
  <p>Hello world !</p>
</div>

Unfortunately, that becomes fast onerous to write MM- every time we add a class. Moreover, the additon of these characters participate to produce long chain of classes and thus to pollute the HTML structure. Given that most of the classes which the user will use will be the ones of Magic Monkey (logically), as much as he applies a rule of naming to his other classes. Thus the user can choose his own rules and he will have to apply them a few times (always logically).

Let's see the following example : the prefixing of the classes proper to the Web application with the characters APP_. Thus, we can quickli see that the first three classes come from Magic Monkey whereas the last one is proper to the Web application :

<div class="padding-50 padding-5-xs align-center APP_class">
  <p>Hello world !</p>
</div>

Organization : adopt an architecture

It is frequent and easy to get lost about style sheets in an important Web application. To avoid or only to limit the probabilities to get lost, I recommend you to adopt an architecture in which you can fast find the style sheet which includes such or such CSS rules.

There is no perfect architecture to my knowledge but this following one is pretty cool : the 7-1 Pattern

I think there is one important criterion in order to respect an architecture pattern : it is the DISCIPLINE ! Indeed, don't break the rules of your architecture. Even if it's a question of adding quickly a small CSS rule, write this last one where it has to be and not in the first style sheet at hand. Otherwise, you will continue to make this kind of breach for the rule and will increase the risks of losing you in a disorder...