John Doe Theme
John Doe is a fully responsive bootstrap 4 theme build with care and creativity using the latest technologies SASS, Gulp, BrowserSync, AutoPrefixer adding prefixes to support majority of browsers and many other development and automation tools.
Customization - Build Tools
The theme is developer-friendly in a way that requires some fundamentals knowledge for node.js, npm, sass and gulp to be able to customize the theme. Of course you can overrride the
css codes by adding yours on top of existing ones. below are the reasons why a developer should use build tools.
Why build tools?
- Development best practice
- Faster development time
- Automating development tasks
- Avoid having redundant css
- Compressing images (jpg, png, gif and svg)
- Adding browser support on fly while styling
- Minified stylesheet boosting website performance
- See style changes in real time within browser while coding
To customize using build tools there are some prerequisites having couple applications node.js and npm installed on your system. Refer to their documentation page for installation instructions on your operating system.
Install the followings:
Now, locate the theme folder within your terminal and type the first command
npm install to install all node.js modules and to be able to move forward with all other
gulp tasks for development and automations tasks.
You can start customizing the theme by using already defined Gulp Tasks for development. These tasks can be found under the theme folder
gulpfile.js file if you willing to modify the tasks.
However, we strongly recommend not to modify or change the tasks unless you are certain on what exactly you doing. Below are all available task for theme development.
||To install all the node modules used for development|
||To compile only sass files into css files|
||To combine and compile css files into a minified css|
||To combine and compile js files into a minified js|
||To compress and optimize png, jpg, svg and gif images|
||To copy all vendors / plugins assets to dist directory|
||To clean your dist directory before any production build|
||To prepare all assets for production and run
||To watch for changes made on sass, js and html files, then recompile and inject changes to browser in real time|
The theme was built using Gulp AutoPrefixer adding prefixes to support almost all of the browsers. Prefixes would be automatically added to your new styles while customizing the theme using build tools. You can add or remove support for any browsers by refer to AutoPrefixer Documentation and editing
package.json file under the theme folder.
Tutorial - How to customize the theme?
We would like to thank those whom put their hard work for free. belows are resources, plugins, assets and all other tools we used and helped us build this awesome bootstrap 4 theme.
- Bootstrap — Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
- Themify Icons — is a complete set of icons for use in web design and apps.
- Isotope — Filter & sort magical layouts
- Unsplash — The internet’s source of freely useable images.
New Features added
- Updated to version 1.5
- Bootstrap 4.3
- added SASS
- added gulp for better and faster customization
- BrowserSync to see style changes in real time
- AutoPrefixer to support all browsers