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:
<body container=".">
<p>Welcome To NICOLAS 1.1!</p>
</body>
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:
<body container=".sample-container">
<p>Hello World!</p>
<div class="sample-container"></div>
</body>
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:
<html>
<head>
<title>Application</title>
</head>
<body>
<div data-nicolas-component="Viewport">
<p>Welcome To NICOLAS 1.1!</p>
</div>
</body>
</html>
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:
<html>
<head>
<title>Sample</title>
</head>
<body>
<div data-nicolas-component="Viewport">
<div data-nicolas-component="Sample">
<p>Great, it works!</p>
</div>
</div>
</body>
</html>
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 nbwansjtu@gmail.com. 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 |
