A static sitebuilder framework built from gulp, nunjucks, browserify, sass and UIKit.
Version Changes: 1.2.0
- Added css module support for browserify
Version Changes: 1.1.0
- Added babel support
- Added minification of js.
For starting your own mosaic project, first clone this repository to your device.
$ git clone https://github.com/tracingpaper/mosaic.git PROJECT_NAME
Now install gulp globally (If not already installed)
$ npm install gulp -g
Now install the required node packages to start building.
$ npm install
You are set to get started.
To use this framework you should know the basics of Nunjucks, SCSS and UIKit. Also you should be a little familiar with node.js and npm.
After installation you will have a lot of files in your downloaded to your project folder (Learn more about the Directory Structure).
We have set up everything for you to start building sites with nunjucks and sass. Run the build command to compile all the nunjucks and sass.
$ gulp build
Start a local live-server to view the result (The live server will run at port 4000)
$ gulp serve
Visit localhost:4000 to see the result.
- app
- dist
- assets
- css
- js
- src
- js
- scss
- views
- pages
- templates
- layouts
- macros
- partials
- config.json
- dist
- gulpfile.js
- .babelrc
- mosaic.json
This file contains all the compilation logics of the framework. It is recommend not to edit this file
This directory manages all the source and compiled files.
Contains all the compiled files and assets. This is the only directory needed for hosting the website
assets : It is used to store any external assets like images required for building the website.
css : It contains the compiled css file (app.css).
js : It contains the compiled js file (app.js).
**/*.html: Compiled html files
Contains all the source files. We only use this directory for coding. On running build command all files in src are compiled to dist.
js : Space for your own javascript code. (Note: only the js files imported to app.js gets compiled)
scss : Includes scss files needed for styling the website. (Note: only the scss files imported to app.scss gets compiled)
views : Includes all the nunjucks (.njk) files. Only the files in pages directory gets compiled to final .html files. The files in templates directory are used for templating in nunjucks.
It includes 3 sub-directories:
- layouts : Nunjucks layouts
- macros : Nunjucks macros
- partials : Nunjucks partials
*Note: To know more about these refer Nunjucks Documentation.
Contains configuration information for the project. There are two files app.json and data.json.
Data in app.json can be accessed via global 'app' object and that in data.json via 'data' object.
config/app.json
{
"title": "Mosaic",
}app.layout.njk
<!Doctype HTML>
<html>
<head>
...
<title>{{app.title}}</title> <!-- Compiled to <title>Mosaic</title> -->
...
</head>
...
</html> Babel configuration file. This file can be used to include plugins and presets into babel. (Read more on Babel)
Open each of these files for better understanding.
Mosaic configuration file. (Limited configuration options available for now)
UIKit is already setup for you to use and customize. Use _variables.scss and _hooks.scss for customizing the UIKit styles. Make sure these files are imported in app.scss.
Read UIKit Docs on Sass for more info.
(Note: The _variables.scss only shows a few variables in use. These are all it needs for small customizations to the site. A complete list of all variables can be found at https://github.com/uikit/uikit/blob/develop/src/scss/variables.scss)
UIKit variable is available globally for access. You can use it for UIKit's js functionality.
//show UIKit notification
UIkit.notification('Hello world.');