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
👉 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
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
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
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. thats it !!
Deployment 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
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