I extended Sage with some styles and scripts, and a features I tend to use a lot. This is very much a Work in Progress, however just thought I’d share it here. I’m also looking for feedback and some collaboration for anybody who is interested in sharing - I’m open to good/bad feedback. Feel free to fork/contribute as well!
“$mainColors” array in SCSS which will auto-generate helper classes for colors (i.e. text-red, or for buttons - solid-red hover-blue, etc). This gets created for each color in that array map.
Helper classes in SCSS for mobile components
Uses rem font sizing with a changing base-font-size which varies depending on screen width
Some Javascript functions I use often - such as listening for parameters in the URL, or making a div full-screen (for landing pages, etc)
Function for allowing hidden labels in Gravityforms.
Note: most of my custom functions are in a separate plugin I use called base-plugin but I have considered incorporating them into my sage-extended theme’s extra.php file.
It contains all kinds of wacky mods like optional Boostrap Nav Walker toggling, WooCommerce integration, bringing in Bourbon, etc.
I basically got fed up of repeating myself for every project so I figured I can just fork Sage, chuck my customisations into it, and then if I want to bring my work into an existing Sage theme I can just fetch / pull / replay edits from my branch onto the target project. Haven’t looked back since!
It’s definitely a great idea for anyone who uses Sage on a daily basis…
That’s awesome. The old roots theme used to have the bootstrap nav menu, but I’m glad it’s not there anymore since it seems like I mostly had to remove/override it anyways. Good to have a branch to bring it back in quickly though.
I like the incorporation of the jsPushMenu library. I’m going to borrow that one
Can’t agree more, but there’s always “that project” which requires it from time to time
That jsPushMenu file is something I threw together as the original dev has a bunch of hardcoded styles in, so I just tell Bower not to include the CSS file in the package, and drop this in instead. Feel free to use it! It’s definately a timesaver as you can change the colour value quickly across the board.
Thanks for sharing, the both of you. My repo is a mess currently, but I transitioned into the alpha Bootstrap 4, bringing back in that loved Bootstrap Nav Walker - utilizing some customizer options such as a Home Hero Customizations, Hero BG, buttons… also navbar colors, theme colors, social account icons ---- erm, I like to use a style-library file creating colors, bg’s etc. for all theme colors and also included the material color pallette.
It’s designed to integrate easily with the livecomposerplugin that I’ve recently become fond of, and prefer over visual composer, cornerstone, etc. It’s simplicity is fantastic, and it is easy to extend.
Girls like to talk, don’t we? Will, I do appreciate some of those responsive font additions you added! Those will come in handy. Fittext works, but really tedious if considering using on all header sizes, links, etc.
