Giter Club home page Giter Club logo

initializr's Introduction

Initializr 2 - Developers Documentation

This documentation is for developers. There is also a more users-oriented documentation.

Presentation

Hi! This documentation is here in case you want to get involved in Initializr, use it as an API to generate archives on the fly, or create your own options (choosing an other JS lib like Mootools, a CSS Framework like Blueprint or 960.gs, etc.).

The basics

The idea of Initializr API is pretty simple. You can either download an archive or display its content. Just ping this URL to get an archive of Initializr:

http://www.initializr.com/builder

Please note that the content of this particular archive is not relevant because no "module" have been added to it, but you'll understand that in a minute :).

If you add a ?print parameter, it will display the content of the archive without downloading it:

http://www.initializr.com/builder?print

Modules

Initializr uses "modules", which are code snippets or files (or both) that will be included in the archive.

The modernizr module, for instance, adds the following line in index.html:

<script src="js/libs/modernizr-2.0.min.js"></script>

and also adds modernizr-2.0.min.js in the js/libs directory.

If you want to add a module to your archive, just add the name of that module as a GET parameter:

http://www.initializr.com/builder?print&jquery&modernizr

All the current available modules can be found on this Github.
A more user-friendly view is also displayed by the Advanced Custom' builder.

How to create your own module

Let's take a look at what contains modules/modernizr on the Git repo:

  • modernizr-2.0.min.js - It's the actual Modernizr JS file,
  • modernizr.html - It's the file containing the HTML JavaScript code inclusion,
  • modernizr.json - Here is the interesting stuff! Let's take a closer look at this file:
{
	"author" : "Paul Irish",
	"name" : "Modernizr",
	"id" : "modernizr",
	"inserts" :
	[
		{
			"what" : "modernizr.html",
			"where" : "index.html/head/html5polyfill"
		}
	,
		{
			"what" : "modernizr-2.0.min.js",
			"where" : "js/libs/modernizr-2.0.min.js",
			"type" : "file"
		}
	],
	"incompatibilities" : ["html5shiv"]
}

We can see that a module configuration file is actually a simple JSON containing the following members:

  • author: The name of the author of the module (you),
  • name: The "Fancy name" of the module,
  • id: The unique id of the module (prefixed with h5bp- or izr- if it's from HTML5 Boilerplate or Initializr),
  • incompatibilities: An array of modules ids that can't be used with yours.
  • inserts: An array of insertions of code snippets or files with the following fields:
    • what: What code snippet or file is going to be included in the archive (refers to an other file of the same module folder),
    • where: In which file and place the code snippet will be injected (in these files), or the name of the file if it's an entire file,
    • type: (optional) specify file for this field if the current insertion is an entire file (like modernizr JS file).

To sum up, if you want to create your own module, just create a folder named mymodulename, with a mymodulename.json containing all these fields, and the required files, and send it to me! Or fork, or whatever method you prefer :) I will integrate it into Initializr as fast as possible!

Modes

"Modes" are a way to enable some modules by default.

For instance, on initializr.com, the "Simple Custom'" builder adds many things that you haven't checked because it assumes that they're vital and useful for you: it's its default minimal configuration. "Default minimal configuration" doesn't mean it's usable, it actually means "what will be included in your archive, no matter which options you activate or not on these builders".

There are currently 3 different modes available:

  • custom which has no modules enabled by default, it's almost an empty archive,
  • h5bp, which stands for HTML5 Boilerplate and activates a set of modules asked by the HTML5 Boilerplate team,
  • Specifying no mode activates Initializr mode, which activates a minimalistic set of modules.

Initializr mode is the default minimal configuration of Initializr Simple Custom' builder available on the home page. "h5bp" is the default minimal configuration of HTML5 Boilerplate "Custom Boilerplate" builder available on their home page.

You can choose a mode by adding a "mode" parameter in the URL:

initializr's People

Contributors

verekia avatar frio avatar

Stargazers

ArtFaks avatar

Watchers

ArtFaks avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.