Middleman Designmodo Template

The base Middleman application used at cantierecreativo, performed to use designmodo template, ready to deploy to Netlify.

Requirements

This project requires Node.js (v10.16.1) with yarn and Ruby (v2.6.2)

Usage

1. Install or set Ruby (2.6.2) with RBENV:

$ rbenv install/set 2.6.2

2. Install or use Middleman gem:

$ gem install middleman

3. Install or set Node (v10.16.1) with NVM:

$ nvm install/use 10.16.1

4. Then run:

$ middleman init project -T=cantierecreativo/middleman-designmodo

Configuration

The template init scripts asks you for the follwoing information:

• Languages string (it,en)
• DatoCMS read-only API token (from DatoCMS settings -> API Tokens)
• Base URL of site (https://sitedomain.ext)
• Remote git repository to store ORIGIN
• Remote git repository to store PRODUCTION and Netlify buildable files

After these questions, the init script installs all dependencies and creates the complete directory site.

You should change the default data in data/config.json and create the proxy routing for the new site.

The final directory structure is:

project/
+-- .gitignore
+-- Gemfile
+-- Gemfile.lock
+-- config.rb
+-- package.json
+-- webpack.config.js
+-- yarn.lock
+-- config
|   +-- i18n-tasks.yml
+-- data
|   +-- config.json
+-- locales
|   +-- it.yml
|   +-- en.yml
+-- source
    +-- partials/
    |   +-- _head.html.erb
    |   +-- _js_includes.html.erb
    +-- templates
    |   +-- browserconfig.xml.erb
    |   +-- redirects.txt.erb
    |   +-- site.webmanifest.erb
    |   +-- index.html.erb
    +-- 404.html.erb
    +-- layouts
    ¦   +-- layout.html.erb

• To see the list of helpers in the system read HELPERS.md
• To see examples of code (JS and CSS) that the template exposes read EXAMPLE.md

Features and Tools

This template comes with the following features and tools:

• middleman-dato: An extension for connect with DatoCMS.
• middleman-minify-html: Minifies whitespace around HTML when the site is built.
• Scss: CSS extension language.
• Erb: Templating engine.
• lazyload: Delay loading of images until user scrolls to them
• AOS: Animate On Scroll Library
• fancybox: JavaScript lightbox library for presenting various types of media

License

Copyright © 2019 CantiereCreativo. This is free software, and may be redistributed under the terms specified in the LICENSE file.