Joe Blog

Mobile-friendly and fully responsive bootstrap 4 theme

  • BS 4
  • HTML 5
  • CSS 3
  • SASS
  • Gulp
  • B-Sync
  • free Theme
  • 4,902
  • Reviews:
    • Category: Blog
    • Released: 2 months ago
    • Updated: 3 days ago
    • Support: No Support
    • Version: 1.5

    Joe Blog Theme

    Technologies Used

    • BS 4
    • HTML 5
    • CSS 3
    • SASS
    • Gulp
    • B-Sync

    Joe Blog 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:

    • node.js — is a JavaScript runtime built on Chrome's V8 JavaScript engine.
    • npm — node.js package manager for installing open-source JavaScript apps.

    Start Customizing:

    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.

    Gulp 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.

    npm install To install all the node modules used for development
    gulp sass To compile only sass files into css files
    gulp css To combine and compile css files into a minified css
    gulp js To combine and compile js files into a minified js
    gulp img To compress and optimize png, jpg, svg and gif images
    gulp vendors To copy all vendors / plugins assets to dist directory
    gulp clean To clean your dist directory before any production build
    gulp build To prepare all assets for production and run gulp sass, gulp css, gulp js, gulp vendors and gulp img commands
    gulp watch To watch for changes made on sass, js and html files, then recompile and inject changes to browser in real time

    Browsers Support

    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.

    Supported By all Browsers

    Tutorial - How to customize the theme?

    customize boostrap 4 themes

    Thanks To

    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.

    • Node.js — is a JavaScript runtime built on Chrome's V8 JavaScript engine.
    • NPM — node.js package manager for installing open-source JavaScript apps.
    • 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.
    • Unsplash — The internet’s source of freely useable images.
    New Features 1 month ago

    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