Giter Club home page Giter Club logo

flavinsky's Introduction

biggie

Biggie is a JavaScript application boilerplate written in ES6 based on bigwheel, a minimalist framework from Jam3. Be sure to check out the full documentation for bigwheel before you're getting started.

Getting Started

git clone https://github.com/baptistebriel/biggie.git folder-name

cd folder-name && npm i && gulp

Directory

biggie
    ├── index.html
    ├── README.md
    ├── package.json
    ├── gulpfile.js
    └── gulp
        ├── index.js
        ├── tasks
        └── utils
    └── assets
        └── less
            ├── import
            ├── require
            └── layout.less
        └── js
            ├── config.js
            ├── framework.js
            ├── main.js
            ├── routes.js
            ├── utils.js
            └── sections
        └── images
    └── build
        ├── app.js
        ├── app.min.js
        └── app.min.css
    └── templates

Gulp tasks

  • less compilation to css
  • browserify + babelify & uglify js files
    • use build/app.js for development, build/app.min.js for production
  • watch for css and js files, livereload with browser-sync

Todo

  • biggie + wordpress (will push to a new branch)
  • biggie + cockpit (will push to a new branch)

Defining absolute URLs

For some AJAX reasons, we have global variables that defines where your site is.
Define the PATH url and the subfolder BASE into /assets/js/config.js

module.exports = {
	PATH: 'http://localhost:3000',
	BASE: '/',
}

Your site will be at http://localhost:3000 by default using browser-sync

JS utils

Under /assets/js/utils.js there's a couple of utils functions:

  • css
    • getRect(top, right, bottom, left) returns the css rect string with clip values
  • js
    • arrayFrom(opt) returns an array from an argument (usually a NodeList)
    • clamp(min, value, max) return a clamped value between min and max values
    • scrollTop return either pageYOffset or document.documentElement||document.body.scrollTop
  • biggie
    • getSlug(req) return the section slug (i.e. home) from bighweel's req parameter
    • createPage(req, slug) create an HTML element and returns it
    • loadPage(req, view, done) used on all sections's init to create the page

Examples

License

MIT, see LICENSE.md.

flavinsky's People

Contributors

baptistebriel avatar

Watchers

James Cloos avatar

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.