Git Product home page Git Product logo

launchpad's Introduction

Launchpad sample home page

Launchpad ๐Ÿš€ โ€” A Boilerplate for Front End Developers

Launchpad is a Bootstrapped, Gulp-powered, Sassified, front end boilerplate that's focused on automated web development. It comes with Browsersync, hot reloading, carousels, animations, icons, and much more. Launchpad is also built on top of Panini for easy HTML partials and templating {{ }}

Baked-in Features:

  • Bootstrap 5
  • Gulp 4
  • Sass
  • Swiper.js
  • Emergence.js
  • Browsersync + hot reloading
  • HTML Templating
  • Popper.js
  • Animate.css
  • Boostrap Icons
  • Compilation
  • Autoprefixing
  • Sourcemaps
  • Concatenation
  • Minification

Details

  • Build on top of Bootstrap with included mobile navigation and icons.
  • Sass/CSS compilation, minification, and prefixing with Autoprefixer (using the Sass 7-1 folder architecture pattern).
  • JavaScript concatenation + minification.
  • Built-in BrowserSync Server - this will automatically refresh your page when files are changed. It also live-injects styles when a .SCSS file is saved.
  • HTML partials and templating with Panini. Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials for better markup organization.
  • build task for shipping your project once it's complete.

Requirements

To use Launchpad, you'll need:

  • Node.js | Test: run node -v in the terminal
  • npm | (Node comes with npm installed). Test: run npm -v in the terminal
  • Gulp | npm install -g gulp

Installing & Use:

  • Clone this repo: git clone https://github.com/dmoncado/launchpad
  • Navigate into the repo directory: cd launchpad
  • Install all node packages: npm install or sudo npm install
  • Run gulp dev
  • Your site is now viewable at: http://localhost:3000
  • Build something great (start from the HTML partials and style with the SCSS partials, go nuts.)

๐Ÿšจ Changes should be committed to src/ files only ๐Ÿšจ

Primary Gulp tasks are:

  • gulp dev for general development
  • gulp build for production ready builds โ€” compiles, concatenates, and minifies everything into a folder called /dist

Folder Structure:

  • dist/ - compiled files
  • node_modules - front-end dependencies (.gitignore'd)
  • src/ - contains all of your core, working files โ€” static assets, pages, templates, etc.
  • src/assets/ - scss files, JS files, images, and fonts
  • src/layouts/ - HTML layouts templates
  • src/pages/ - site pages
  • src/partials/ - HTML Partials
  • gulpfile.js - all task definitions
  • package.json - handles the front-end dependencies

Happy Coding </>

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.