TLGHosting is a responsive HTML Template built from scratch using SASS and following BEM and SMACSS Methodologies
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
builds
components
.gitignore
README.md
gulpfile.js
package.json

README.md

TLGHosting

TLGHosting is a responsive HTML Template built from scratch using SASS and following BEM and SMACSS Methodologies, The PSD has been designed by Christian Barin , you can download it from here.

Live Preview

Live preview of the project: here

Installation

Gulp is used as task runner for this project, you need nodeJS installed on your machine in order to install Gulp and its plugins.

  1. Clone the project to your maching
  2. To install all the developement and production dependencies, from within the project directory run the command:
npm install  

All the dependencies can be found on package.json file.

File Structure

.
├── builds

    ├── developement
    
    ├── production
    
├── components

    ├── sass
    
    ├── scripts
      

Workflow

  • To watch your modifications in The developement environment run the command:
gulp

If you are on windows, You may face probelms running the gulp command, you need to install gulp globally by running the command:

npm install -g gulp
  • You can now preview your changes on the localhost server, the browser will auto-reload whenever you make modifications:
http://localhost:8080/

Making Modifications

  • HTML: Make your modifications on the file: builds/developement/index.html, this file will get minified when you run the gulp command in the production environment

  • CSS: Any modification in the CSS should be made on the SASS files, found in components/sass folder, this Diagram will help you to understand the structure. untitled drawing 1

  • Javascript: Add your script files on: components/scripts then add them to the jsSources array in the gulpfile.js, gulp will concatenate all the JS files found in this array.

  • The project uses browserify to install and bundle libraries and frameworks.

Deployment

When your project is ready for deployment you can run the gulp command in the production environment:

NODE_ENV=production gulp

This will generate an optimized version of the project on the production folder:

  • Minified HTML code
  • One Compressed CSS file
  • Optimized and compressed images
  • One compressed Javascript file

screen shot 2018-08-06 at 4 43 32 pm

Resourses