Giter VIP home page Giter VIP logo

zurb-express's Introduction

ZURB Express Template

This is an unofficial ZURB Template for use with Express and Building BLocks. It is intended to be incorporated into Zurb Foundation's CLI as an alternitive to static site prototypes.

Why make this?

Because I wanted a super lightweight MODERN server that is easy to learn, teach and use for projects.

Goals

  • LIGHT weight node server
  • Amazingly fast front-end prototyping using building blocks to build production ready sites in hours not days and progressively build the backend as needed.
  • Optional backend for basic blogs, ecommerce, photo gallery,

Features

  • Building Blocks Compatable !
  • Templates !
  • Handlebars HTML templates with Express
  • Sass compilation and prefixing
  • JavaScript module bundling with webpack
  • Built-in BrowserSync/Nodemon server
    • run nodemon ./server.js localhost 8080
  • For production builds:
    • CSS compression
    • JavaScript compression
    • Image compression
  • Authentication
  • Messaging (visitors can leave you a message).
  • Optional database (javascript object prototypes by default).

Future Goals

Installation

To use this template, your computer needs:

USE

Using through git

git clone https://github.com/HansUXdev/zurb-express

Using the CLI

This template can be MANUALLY installed on the Foundation CLI.

To install it manually on the Foundation CLI you will need change the following files:

foundation-cli/lib/util/questions.js should look like this:

	//...
    name: 'template',
    message: 'Which template would you like to use?',
    default: 'basic',
    choices: [{
      name: 'Basic Template: includes a Sass compiler',
      value: 'basic'
    }, {
      name: 'ZURB Template: includes Handlebars templates and Sass/JS compilers',
      value: 'zurb'
    },{
      name: 'Express Template: a basic express server compatible with building blocks',
      value: 'express'
    }]

foundation-cli/lib/commands/new.js should look like this:

	//...
var repositories = {
  sites: {
    basic: 'https://github.com/zurb/foundation-sites-template.git',
    zurb: 'https://github.com/zurb/foundation-zurb-template.git',
    express: 'https://github.com/HansUXdev/zurb-express'
  },
  apps: 'https://github.com/zurb/foundation-apps-template.git',
  emails: 'https://github.com/zurb/foundation-emails-template.git'
}
npm install foundation-cli --global

Use this command to set up a blank Foundation for Sites project with this template:

foundation new --framework sites --template zurb

The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.

Now cd to your project name and to start your project run

foundation watch

Please if you like it star this repo and tell Zurb to add it to the CLI Zurb Foundation's CLI.

zurb-express's People

Contributors

hansuxdev avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

git04112019

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.