teplotech-markup

The markup for subsequent integration with CMS. Contains raw HTML files and other resources.


License
Unlicense
Install
npm install teplotech-markup@1.1.4

Documentation

Tools installation instruction

Before you start deployment these tools have to be installed on your system globally:

1. NodeJS

2. Bower (required only for developing the package)

$ npm install -g bower

3. Gulp (required only for developing the package)

$ npm install --global gulp-cli

4. Webpack (required only for developing the package)

$ npm install webpack -g

Deploying the packet as an NPM dependency

Execute the following commands in your terminal:

$ cd YOUR_PROJECT_DIR
$ npm init
$ npm install teplotech-markup --save

This will initialize your project (e.g. a Wordpress theme) as an NPM packet and install the teplotech-markup packet as a dependency in node_modules subfolder of YOUR_PROJECT_DIR.

NOTE. When a new version of the package is available you can update your copy by typing:

$ npm update

Deploying for work on this packet

ATTENTION Make sure all the tools mentioned above have been installed before executing the following commands!

$ git clone git@gitlab.com:coderlex/teplotech-markup.git
$ cd ./teplotech-markup
$ npm install
$ bower install
$ gulp

Development guide

Some useful gulp tasks:

  • To assemble the sprites into texture atlases type in console:
    $ gulp sprite
    
  • To assemble images into data-uri partials (sass/base64/*.scss) type:
    $ gulp base64
    
  • Then SASS may be successfuly compiled into CSS styles:
    $ gulp sass
    
  • To speed-up development process I strictly recommend you to use sass watcher, which will automatically compile *.scss files on change:
    $ gulp sass:watch
    
    The same thing exists for Webpack task either (see below):
    $ gulp webpack:watch
    
  • To pack JS modules into bundles type:
    $ gulp webpack
    

Folder structure

├─dist               // built files to deploy on sever
│ ├─bower_components // built external libraries like html5shiv
│ ├─css              // compiled scss
│ ├─fonts            // built web fonts
│ ├─img              // images + built texture atlases
│ ├─js               // javascript bundles
│ └─*.html           // html templates
├─src                // source files
│ ├─fonts            // the same as /dist/fonts in this case
│ ├─images           // various images (see gulpfile.js)
│ │ ├─base64         // images to base64-encode into SASS mixins
│ │ └─sprites        // tiles to build texture atlases
│ │   └─ui           // default ui texture atlas (-> /dist/img/ui.png)
│ ├─scripts          // client javascript sources
│ ├─styles           // *.scss
│ │ ├─base64         // base64 encoded data generated by the gulp task
│ │ ├─blocks         // BEM blocks
│ │ ├─boilerplate    // reusable helpers
│ │ ├─components     // thematic assemblies (like _forms.scss)
│ │ └─sprites        // sprite mixins and data generated by the gulp task
│ └─*.html           // the same as /dist/*.html in this case
└─node_modules       // js development tools and sources

Tips & Notes

How to upgrade my NodeJS version?

  • On Linux:
    # npm cache clean -f
    # npm install -g n
    # n stable
    
  • On Windows

How do I install npm?

You shouldn't, npm comes with NodeJS nowadays.

What another tools would you recommend?

  1. MSYS2 - more convenient terminal for Windows, very useful when working with Git under this platform.