Dev environment setup

Please note: this step is absolutely optional. It aims for advanced user who want to speed up development process with professional grade Front-End toolset shiped with Around. If you are not familiar with these tools and have no time to dive in you can still use plain HTML / CSS / JS to customize Around. Files you need are located inside minimog/dist folder. In this case you can skip this and next sections. Happy coding :)

Minimog is built using modern development toolset.

Ruby Official website

A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

Node.js Official website

Is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Gulp Official website

The JavaScript task runner. It helps with performing repetitive tasks like minification, compilation, unit testing, linting, etc. This is possible thanks to extensive Gulp Plugins library.

Sass (Syntactically Awesome Style Sheets) Official website

Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass gives you the power of variables, mixins, functions, etc.

Jekyll Official website

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.

Bootstrap 4 Official website

Latest version of the most popular HTML, CSS, and JS framework in the world. Around is built on Bootstrap 4 and heavily depends on it. Around has all BS4 components + bunch of own plugins and components.

This section will explain how to setup professional Front-End development environment for fast and smooth Around customization using these technologies.

Text Editor and Terminal (Command Line)

You can use any text editor at your disposal and available Command line tool (Command Prompt for Windows or Terminal on MacOS). Our personal preference is Visual Studio Code. It is free, has great buil-in terminal (console), built-in git client, debugging, huge extensions library and available for MacOS, Windows, Linux.

Installing Node.js and npm

In order to be able to setup Minimog development environment you will need to install Node.js and its Package Manager (npm).

Node.js is absolutely free and available for download via its official website for MacOS, Windows, Linux systems. Download Node.js and npm here.

Learn more about Node Package Manager and available packages here: https://www.npmjs.com

Installing packages necessary for Minimog development

When Node.js and npm is installed you are ready to install all dependencies necessary for Minimog development.

Navigate to the directory containing the package.json file. Inside your command line tool type step by step:

Installing Node.js and npm
Install Node.js at: Download Node.js and npm here.

Learn more about Node Package Manager and available packages here: https://www.npmjs.com
Install Ruby at https://www.ruby-lang.org/en/documentation/installation/ if you have not installed it
npm install
gem install bundler
gem install bundler jekyll
gem install jekyll-toc jekyll-tidy

These will start the process of installing all dependencies which are listed inside minimog/package.json file. Wait until installation is finished and jump to the next section Working with Gulp.