Prerequisites

Following softwares are required for running ZiON:

1. Git
2. Configure git command line tool
3. Node
4. Gulp
5. Bower
6. Graphicsmagick

All the softwares listed above should be available in cmd or terminal based on the OS you are using

Setting up a new project

1. Clone ZiON git clone --recursive -j8 git@github.com:prium/ZiON.git
2. Rename ‘ZiON’ with your template name
   1. Directory (Folder) name
   2. Name in bower.json (Optional)
3. Change the remote url
4. Open the folder with terminal or cmd. Clean ZiON’s git record and setup git for your project by running following commands:
   1. cd [template name]
   2. rm -rf .git
   3. git init
   4. git add .
   5. git commit -m "Initial commit"
   6. git remote add origin [your project’s git url]
   7. git push -u --force origin master
5. Install dependencies by running following commands:
   1. bower install
   2. npm install
6. Run gulp and your default web browser will open up http://localhost:3000

Environments

1. Debug
2. Live
3. Product

1. In javascript

   @if ZION_ENV = 'DEBUG'
       alert("debug mode!");
   @endif

2. In pug

   #{ZION_ENV}

3. In SCSS

   //todo

Configurations

1. SCSS

   Edit assets/scss/_config.scss and override the available variables. You can find all the available SCSS variables in zcore/assets/scss/_config.scss

2. Image blur

   todo

Taskrunner commands

Embedded gulp commands in ZiON and their actions are follows:

• gulp: Start the engine and run a server on http://localhost:3000/
• gulp compile: Compiles scss, pug and generate source maps
• gulp assets: Push image, video, audio, fonts etc from source to bin
• gulp build: Build compressed, final template, bin temporary files (todo)

Skeleton

The Skeleton provide standard wrapper for all pages, including default libraries, content blocks (described in section 5), title tag and the overall genetic structure of the output HTML pages.

Located at zcore/pug_modules/skeleton.pug

Tip: Extend the skeleton.pug under src/pug_modules to add your global markups.

Pages

Pages are located at src/pages. A page extends the skeleton and add sections to it self. All contents including asset links and copy text are provided from here.

A page must extend a skeleton (described in section 4).

Any page can access and override the following blocks defined in skeleton:

• block variables : Overrides some default content the page
• block styles : CSS codes and libraries
• block content : All sections are included in this block
• block scripts : JS codes and libraries
• block offCanvas : Offcanvas area. User this block if you want to add something outside <main> tag. eg: Push in menu.

Sections

Located at:./core/pug_modules/section

Elements

Located at:./core/pug_modules/elements

Buttons

Sizes

• btn-xs
• btn-sm
• btn
• btn-lg

Styles

• btn-xs
• btn-sm
• btn
• btn-lg

Widgets

Located at:./core/pug_modules/widgets

SCSS

Breakpoints

ZiON is using Media Queries with superpowers.

Default breakpoints for zion, inspired by bootstrap 4:

$mq-breakpoints: (
    mobile:  544px,
    tablet:  768px,
    desktop: 992px,
    wide:    1200px
);

Read MQ documentation for using mq()

Layout helpers:

• .full-height Make the section full height for desktop devices
• .v-center Make the inner content centered