Git Product home page Git Product logo

yashilanka / modern-web-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
84.0 3.0 11.0 22.23 MB

All-in-one Complete Modern Front-end Development Boilerplate for Starters

Home Page: https://yashiel.github.io/Modern-Web-Boilerplate/

License: MIT License

Smarty 2.59% JavaScript 18.95% HTML 19.33% CSS 59.09% Batchfile 0.04%
boilerplate gulp build boilerplate-template boilerplate-front-end javascript css scss css3 html5 bootstrap bootstrap-4 foundation-site foundation6

modern-web-boilerplate's Introduction

Intro

Modern Front-end Development Boilerplate - v1.3

Easy to use, all-in-one starter boilerplate to develop, build and deploy your next web project

πŸ“Œ What's New - v1.3

  • Read Sketch files and extract Artboards into icon-fonts.
  • Easy to use Icon-Font Browser with following features,
    • Ability to Copy-to-clipboard HTML(CSS Class), SCSS, SCSS Shorthand and SCSS Unicode Variable
    • Clear documentation about how to use it.
    • Name your icon-font whatever you want.
    • Can manage everything inside setting.json file.

πŸ“Œ Features

  • Multiple Frontend SCSS frameworks at your disposal ( Eg:- New Bootstrap 4 and Foundation 6 )
  • Easy to manage folder structure but you can change whatever you want ( Eg:- MVC framework like folder structure )
  • Centralized place to manage your js, img, fonts and all project related settings.
  • Ability to auto switch remote url, if you prefer.
  • For Windows users easy to run dev and build tasks with provided shortcut bat files.
  • hassle free font-face generation with ability to switch remote url on build process.
  • Integrated project backup feature. ability to get source and build files backup anytime
  • Automatic Deployment to production server.
  • Hassle free build process
  • Secure JS file with JS obfuscation ( Warning :- Final Production JS file size may increase significantly )
  • Icon-Fonts Generation - v1.3 ⭐ New

Other Features

  • Auto Browser Refresh.
  • Compass Utility Loader (We Love Compass but not Ruby Compass).
  • Auto Fetch Library from CDNJs or Google libraries base on package.json package version number. (Eg : jQuery 3.3.1 will be CDN jQuery 3.3.1, if you wish to change jQuery version please change version number in package.json file.)
  • Integrated CDN Fallbacks
  • JS Uglify
  • Image Minify and Optimization
  • Responsive Typography

Prerequisites

Yarn ( Yarn is a replacement for bower).

Nodejs


πŸ“Œ Getting Started

πŸ‘‰ Step 01

Download the package from GitHub and start to configure using setting.json file.

Folder Structure

Folder Structure


πŸ‘‰ Step 02

Installing

After you download the project files, open your command prompt/terminal/iTerm or whatever you like and cd/dir into the folder and run

yarn
Demo

Yarn Demo

NOTE: make sure to install nodejs and yarn before run yarn commands.


πŸ‘‰ Step 03

Start Development AKA Start Dev

Once you done with your dependency installation, then run

gulp
Demo

Gulp Demo

NOTE: For windows users. you can run start_dev.cmd file by double clicking it


πŸ‘‰ Step 04

Start Build Process

To get Production ready code, run below command.

Tip: You can skip build questions by pressing enter/return key πŸ˜„

gulp build --production
Demo

Gulp Demo

For windows users. you can run start_build.cmd file by double clicking it


πŸ‘‰ Step 05

πŸ“Œ Deployment

Rename ftp-config.json.tpl -> ftp-config.json and enter your remote host details. once you done with the edit run build command and choose appropriate answer to deploy your project. that’s it !!

Deployment Preview

Deploy Preview


πŸ“Œ Icon-Font Generator & Browser - v1.3 - New πŸ”₯

When you start your dev server, icon generator will read the sketch file and extract all contain art-boards into icon fonts. you can change the icon-font name with other settings by editing setting. json file.

To view Icon-Font Browser go to

http://localhost:3000/iconfonts.html
Demo

Iconfont Demo

Iconfont Demo

Roadmap / Upcoming Feature

  • Ability to read and extract vector data from Adobe Illustrator and Sketch files and generate icon fonts on the fly.
  • Easy to use SVG Sprite based Icon Generation system
  • ++ More useful features

Author

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

modern-web-boilerplate's People

Contributors

yashilanka avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

modern-web-boilerplate's Issues

Need update

Please updated Modern-Web-Boilerplate dependencies. Its not updated for almost 2 to 3 years.

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.