- WordPress was the choice here in Australia, and I needed to build out heaps of custom themes, I found a great resource called understrap, which is a theme starter kit for WordPress. Having made hundreds of Wordpress websites over the years, these guys have been my favourite.
- THEME: UnderStrap – 0.8.9. Posted a reply to UnderStrap Child compatible with WooCommerce 3.5.0?, on the site WordPress.org Forums: The new 0.8.8 is available at now. And will be available here soon. Created a new ticket, #61712, in Themes Trac: THEME: UnderStrap – 0.8.8.
I go to github understap homepage and read the 'Developing With npm, Bower, Gulp and SASS and Browser Sync1' so I reinstall nodejs, npm, instal bower, grunt, gulp and follow this steps: Installing Dependencies. Make sure you have installed Node.js, Bower, and Browser-Sync on your computer globally. Our child themes for UnderStrap provide a great way to get going quicker with your custom theme development. UnderStrap is a WordPress theme framework. About Core & UnderStrap. Core is a clean, minimalistic and lightweight blogging theme for WordPress. It is a child theme made for UnderStrap, a solid also clean theme framework. Thanks for buying it! Some more words about UnderStrap: UnderStrap is a open.
Many page builders can run out of the box on any given WordPress Theme.
From a technical point of view, this is very easy to achieve – as simply the page builder plugin will typically load it’s CSS library ON TOP of your Theme’s CSS – another source of bloat, duplication, disorder, and poor performance.
LiveCanvas has a different approach, for the sake of DRYness.
The LiveCanvas plugin assumes you are using a theme which is based on Bootstrap 4 – and does NOT load ANY extra CSS or JS file.
So bloat is minimized – but there’s another interesting related fact.
If for some reason you want to switch off the page builder plugin, the site will still be there with LiveCanvas.
Not with any other page builder out there.
Recommended Themes
These are the recommended themes that we suggest for having a powerful yet lightweight core:
1. Our micro starter theme, picostrap. Batteries included
Picostrap is a fully free and LiveCanvas-friendly minimal Bootstrap starter theme.
Released in early Nov 2020, we are actually at the third iteration of our theme, and it’s lighter and faster than ever.
It has some unique power tools for frontend developers, like a built-in SASS pipeline, and a “live reloading” tool – all without requiring to install command line tools.
It comes with a specific blank child theme so you have a safe place for your hacking.
It focuses on speed – delivering a lightweight yet fully featured integration of Bootstrap and WordPress. It will help you achieve good PageSpeed results without getting crazy – just keeping your pages reasonable, will be enough.
If you were used to CustomStrap, you’ll immediately feel at home with picostrap.
Why did we end up rewriting a theme for scratch?
Well times have changed; time to drop jQuery and embrace vanilla JS. Time to drop also FontAwesome and other icon fonts.
Well times have changed; time to drop jQuery and embrace vanilla JS. Time to drop also FontAwesome and other icon fonts.
We recommend using picostrap on all your new projects. Read the picostrap introduction blog post or check out the picostrap.com microsite.
Picostrap recently got WooCommerce compatibility so it’s a no-brainer choice.
Wp Bootstrap Starter
Please consider that picostrap was born merging the best of Understrap and CustomStrap, which are the other Themes listed below, and adding some polish.
So you may consider the reading below on a different perspective.
2. UnderStrap: a vanilla starter theme
UnderStrap is a very solid and efficient open source WordPress starter Theme based on Bootstrap 4.
It’s the GitHub project that received most positive votes from worldwide developers in his league: WordPress and Bootstrap 4.
It’s Woocommerce-compatible, SASS command-line friendly, and includes a very basic and unopinionated styling – so you can “bend” it easily adding your own code if you want.
It lacks customization options, and it’s quite “geek” oriented – that’s why we created a child theme to add some sugar to it, CustomStrap.
It’s SASS pipeline is based on command-line tools that you should install to take profit of Bootstrap.
Understrap Child Theme
3. CustomStrap
CustomStrap is our own former solution, and it comes as an UnderStrap child theme.
It’s free and open source as well. And it rocks.
While adding NO BLOAT to your pages (in fact removing some), it allows to customize the Bootstrap colors and variables without using the command line tools – thanks to its built-in SCSS compiler, directly via the WordPress Theme Customizer.
It adds some really nice options to UnderStrap – plus adding compatibility with the Custom Header & Custom Footer feature of LiveCanvas.
Tom segura twitter. It does all this while keeping things lean and clean.
You can use it like it is or use it as a starter theme to build your perfect site with LiveCanvas.
4. Your own 100% custom theme
If you want to run LiveCanvas with your own custom WordPress Theme, you’re absolutely welcome to do it.
Understrap Wordpress Theme
There are very few steps required:
- [mandatory] Your Theme must include the Bootstrap 4.xx min.CSS file – this should sound obvious.
- [recommended] Your Theme must include the Bootstrap 4.xx JS files – if you need to have BS elements that need js support like carousels.
- [mandatory] Your Theme must have an “empty.php” empty page template called “empty” – this template should only call header and footer and the loop. No strange things. Should take a second to do, butchering your own page.php for example. Here is a sample code:
- [mandatory] The file above shall be placed in a directory of your theme called “page-templates” (so, mimicking the UnderStrap structure, eventual theme switches will be flawless without hacks)
- [not more necessary as from LC 1.6 now uses inline SVG icons] Your Theme must include FontAwesome 4.7
- [mandatory] Your Theme must include the following line in the functions.php file to get rid of the annoying dialog recommending UnderStrap:
As you see it’s really easy to make your theme work with LiveCanvas.
Bootstrap 4 Github
If you are a theme developer and feel like dropping a question, get in touch. We like having educated email chats with theme developers.
On another side
Upon first launch, the LiveCanvas plugin will check if one of the themes listed above is used, and show a message if this is not the case.
Hi Holger, I have a noob question but is important for me. {FIRST: my english is very bad, sorry for that.}
Okey, this is my history.. I download the .zip in the homepage understrap.com (this is the theme) and I use WAMP for localhost testing, so I unzip the file in a new WP installation in themes folder and install the theme with the WP Dashboard. Very good this steps.
Then I decided add custom styles in theme.scss file, I use Ruby for compass and sass compile files. I try and not work. I supose the problem is the version of Ruby, after update update ruby, sass and compass, try again and nothing work with sass files.
Okey, not cry Lucas, be patience :sparkles:
I go to github understap homepage and read the 'Developing With npm, Bower, Gulp and SASS and [Browser Sync][1]' so I reinstall nodejs, npm, instal bower, grunt, gulp and follow this steps:
Installing Dependencies
Okey, this is my history.. I download the .zip in the homepage understrap.com (this is the theme) and I use WAMP for localhost testing, so I unzip the file in a new WP installation in themes folder and install the theme with the WP Dashboard. Very good this steps.
Then I decided add custom styles in theme.scss file, I use Ruby for compass and sass compile files. I try and not work. I supose the problem is the version of Ruby, after update update ruby, sass and compass, try again and nothing work with sass files.
Okey, not cry Lucas, be patience :sparkles:
I go to github understap homepage and read the 'Developing With npm, Bower, Gulp and SASS and [Browser Sync][1]' so I reinstall nodejs, npm, instal bower, grunt, gulp and follow this steps:
Installing Dependencies
- Make sure you have installed Node.js, Bower, and Browser-Sync on your computer globally
- Then open your terminal and browse to the location of your UnderStrap copy
- Run: $ npm install then: $ bower install and finally: $ gulp copy-assets
Running- To work and compile your Sass files on the fly start:
$ gulp watch
- To work and compile your Sass files on the fly start:
I make a change in scss file, and with 'gulp watch' all work fine. Yeah Lucas, you are an Avenger! GREAT GREAT!
So I go to the understrap theme folder in localhost and see a lot of new files and folders, so my noob question is: This is a correct way to work with the framework? I upload all this folders and files in my host for my online project?
Thanks a lot for this framework :)
So I go to the understrap theme folder in localhost and see a lot of new files and folders, so my noob question is: This is a correct way to work with the framework? I upload all this folders and files in my host for my online project?
Thanks a lot for this framework :)