Nicolas1.1 Cookbook

Nicolas1.1 is a simple yet powerful library for building modern, component based and statically compiled web interfaces.

Before start, we need to setup environment, look at these prerequisites.

Download nicolas1.1.

Note that I just happened to publish on npm, don't use npm to install.

In your Downloads directory, unzip nicolas1.1-master. The file structure should be like the following image:

Now open your terminal app and change directory as the following line:

cd ~/Downloads/nicolas1.1-master/bin

Create a component

node create-component Sample

Look into components directory, find component.Sample.html:

    
Welcome To NICOLAS 1.1!

Find component.Sample.scss:

//TODO Write SCSS Code For The Component

div[data-nicolas-component="Sample"] {
    
    
}

And find component.Sample.js:

//TODO Write Javascript Code For The Component

console.log(exports);

This is the initial code of component Sample, change the html code as below:

    
Hello World!
    

Now we've accomplished our first component Sample, next we can create an application to use it. In the terminal app, type:

node create-application Sample

This time let us look into applications directory, find Sample.html:

    
        
    
    
        

            
Welcome To NICOLAS 1.1!
        
    

Find Sample.scss:

//TODO Write SCSS Code For The Application

And find Sample.js:

~function() {

    window.addEventListener2('ready', function() {

        // TODO Write Javascript Code For The Application
    });
}();

We make a simple modification of the html file to use component Sample:

    
        
    
    
        

            

                
Great, it works!
            
        
    

Then back to terminal app, use below command:

node build-testing Sample

At last, let's look into the build/testing directory, find Sample.html and open it in your browser, our application Sample works!

For more information about how to use, please keep following my GitHub repository nicolas1.1 and my blog NicolasWan.

If you got any ideas or questions, please contact my email address [email protected]. For any issues, please leave a message at nicolas1.1/issues.

Appendix:

Command	Description
node create-component ${name} [-r]	create a component with or without a resource folder
node unlink-component ${name}	delete a component
node rename-component ${from} ${to}	rename component
node create-application ${name} [-r]	create an application with or without a resource folder
node unlink-application ${name}	delete an application
node rename-application ${from} ${to}	rename application
node build-testing ${name}	build an application
node build-production ${name}	build and compress an application
node clean-testing	clean built applications
node clean-production	clean built and compressed applications
node clean-build	clean all applications