fullcircle_bootstrap is a Wordpress starter theme with Underscores (_s) and Twitter Bootstrap integration. Also includes the wp-bootstrap-navwalker plugin by twittem for easy Bootstrap menu integration.
This theme implements the Advanced Custom Fields plugin (ACF). You will need to add the contents of this plugin to the assets/acf directory, else remove appropriate section from the functions.php file.
Using Grunt for SASS CSS and JS compilation -- use
sudo npm install (NOTE: I've had some problems with Node not install latest modules lately, might need to use
sudo npm install -g npm@latest instead) command to get Grunt dependancies installed. Currently have
grunt dist and
grunt dev setup.
grunt optimize will need to be configured on a per project basis. Will basically run the
grunt dist command, and additionaly generate an "Above the fold" css file and remove any unused css based on the URLs passed. The
uncss method will need extra classes added to the
- Edit custom.js file within the /assets/js/dev folder and issue
grunt distcommmand to compile into /assets/js as fullcircle_bootstrap.min.js.
- Edit _custom.scss file within the /assets/scss folder and issue
grunt distcommmand to compile into /assets/css as fullcircle_bootstrap.min.css.
How to use
I created this WordPress+Bootstrap theme to make it easier to get started with custom theme development. This is not intended as an "as-is" theme, but instead as a starting point for your custom theme development.
I've moved some things outside of WordPress to give more control over the scripts and stylesheets loaded to allow more control over the optimization of the theme.
assets/jsdirectory then add the library name to the
- Adding stylesheets: it is recommend to add stylesheets to the
assets/cssdirectory then add them as
@import's within the
assets/scss/fullcircle_bootstrap.scssfile. This will ensure all stylsheets are concatenated and compressed as a singular file.
gruntcommands) via the WordPress
enqueuemethod within the
functions.phpfile. This is to allow more flexibility in the optimization of the theme. The primary js and css file are outlined above. To compile them issue the
grunt distcommand, or simply issues
grunt watchto have them automatically generated if actively making changes.
1. Added Bootstrap hover drop-down to package so Bootstrap drop-down menus will now expand on hover. Can set options in
inc/wp_bootstrap_navwalker.php lines 85-91. Default is to stay open for 500 milliseconds after hover out.
2. Can now easily animate in items when in viewport with Velocity and jQuery inview. To use simply add the velocity-animation class to any element, with data-animation="" set to your favorite Velocity animation. When the element comes into the viewport, the velocity animation will be added (defaults to only run once). To run each time element comes into viewport, change
$(this).bind on line 21 of
assets/js/dev/custom.js and re-compile js file with
grunt dist or
grunt dev command.
<div class="velocity-animation" data-animation="slideUpBigIn"> I will "slideUpBigIn" when I come into the viewport </div>
3. Theme now includes baked-in minification of inline js/css and html. If you wish to remove this functionality simply uncomment/delete the
require line from ~line 308 in the