43fdff37d6
Define .screen-reader-text |
||
---|---|---|
css | ||
fonts | ||
global-templates | ||
inc | ||
js | ||
languages | ||
loop-templates | ||
page-templates | ||
sass | ||
sidebar-templates | ||
src | ||
woocommerce | ||
.gitignore | ||
.jscsrc | ||
.jshintignore | ||
.travis.yml | ||
404.php | ||
CHANGELOG.md | ||
CODE-OF-CONDUCT.md | ||
CONTRIBUTING.md | ||
ISSUE_TEMPLATE.md | ||
LICENSE.md | ||
README.md | ||
archive.php | ||
author.php | ||
bower.json | ||
codesniffer.ruleset.xml | ||
comments.php | ||
composer.json | ||
footer.php | ||
functions.php | ||
gulpconfig.json | ||
gulpfile.js | ||
header.php | ||
index.php | ||
package.json | ||
page.php | ||
readme.txt | ||
screenshot.png | ||
search.php | ||
searchform.php | ||
sidebar.php | ||
single.php | ||
style.css |
README.md
See: Official Demo | Read: Official Docs Page
UnderStrap WordPress Theme Framework
Website: https://understrap.com
Child Theme Project: https://github.com/understrap/understrap-child
About
I’m a huge fan of Underscores, Bootstrap, and Sass. Why not combine these into a solid WordPress Theme Framework? That’s what UnderStrap is. You can use it as a starter theme and build your own theme on top of it. Or you can use it as a parent theme and create your own child theme for UnderStrap.
License
UnderStrap WordPress Theme, Copyright 2013-2018 Holger Koenemann UnderStrap is distributed under the terms of the GNU GPL version 2
http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Changelog
See changelog
Basic Features
- Combines Underscore’s PHP/JS files and Bootstrap’s HTML/CSS/JS.
- Comes with Bootstrap (v4) Sass source files and additional .scss files. Nicely sorted and ready to add your own variables and customize the Bootstrap variables.
- Uses a single minified CSS file for all the basic stuff.
- Font Awesome integration (v4.7.0)
- Jetpack ready.
- WooCommerce support.
- Contact Form 7 support.
- Child Theme ready.
- Translation ready.
Starter Theme + HTML Framework = WordPress Theme Framework
The _s theme is a good starting point to develop a WordPress theme. But it is “just” a raw starter theme. That means it outputs all the WordPress stuff correctly but without any layout or design. Why not add a well known and supported layout framework to have a solid, clean and responsive foundation? That’s where Bootstrap comes in.
Confused by All the CSS and Sass Files?
Some basics about the Sass and CSS files that come with UnderStrap:
- The theme itself uses the
/style.css
file only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles. - The
/css/theme.css
and its minified little brother/css/theme.min.css
file(s) provides all styles. It is composed of five different SCSS sets and one variable file at/sass/theme.scss
:
@import "../src/bootstrap-sass/assets/stylesheets/bootstrap"; // 2. All the Bootstrap stuff - Don´t edit this!
@import "understrap/understrap"; // 3. Some basic WordPress stylings and needed styles to combine Boostrap and Underscores
@import "../src/fontawesome/scss/font-awesome"; // 4. Font Awesome Icon styles
// Any additional imported files //
@import "theme/theme"; // 5. Add your styles into this file
- Don’t edit the number 2-4 files/filesets listed above or you won’t be able to update Understrap without overwriting your own work!
- Your design goes into:
/sass/theme
.- Add your styles to the
/sass/theme/_theme.scss
file - And your variables to the
/sass/theme/_theme_variables.scss
- Or add other .scss files into it and
@import
it into/sass/theme/_theme.scss
.
- Add your styles to the
Installation
There are several ways to install UnderStrap. We'll look at three of them: (1) classic install by uploading UnderStrap to a WordPress install, (2) using npm, and (3) using the theme directory in WordPress.
Classic install
- Download the understrap folder from GitHub or from https://understrap.com
- IMPORTANT: If you download it from GitHub make sure you rename the "understrap-master.zip" file just to "understrap.zip" or you might have problems using child themes!
- Upload it into your WordPress installation theme subfolder:
/wp-content/themes/
- Login to your WordPress backend
- Go to Appearance → Themes
- Activate the UnderStrap theme
npm install
- Open your terminal
- Change to the directory where you want to add UnderStrap
- Type
npm install understrap
WordPress.org install
- Open your WordPress backend
- Click on "Appearance -> Themes"
- Hit the "Add new" button
- Search for "UnderStrap"
- Hit the "install" button
- Activate the theme
Developing With npm, Gulp and SASS and [Browser Sync][1]
Installing Dependencies
- Make sure you have installed Node.js and Browser-Sync (optional) on your computer globally
- Then open your terminal and browse to the location of your UnderStrap copy
- Run:
$ npm install
Running
To work with and compile your Sass files on the fly start:
$ gulp watch
Or, to run with Browser-Sync:
- First change the browser-sync options to reflect your environment in the file
/gulpconfig.json
in the beginning of the file:
{
"browserSyncOptions" : {
"proxy": "localhost/theme_test/", // <----- CHANGE HERE
"notify": false
},
...
};
- then run:
$ gulp watch-bs
How to Use the Built-In Widget Slider
The front-page slider is widget driven. Simply add more than one widget to widget position “Hero”.
- Click on Appearance → Widgets.
- Add two, or more, widgets of any kind to widget area “Hero”.
- That’s it.
RTL styles?
Add a new file to the themes root folder called rtl.css. Add all alignments to this file according to this description: https://codex.wordpress.org/Right_to_Left_Language_Support
Page Templates
UnderStrap includes several different page template files: (1) blank template, (2) empty template, and (3) full width template.
Blank Template
The blank.php
template is useful when working with various page builders and can be used as a starting blank canvas.
Empty Template
The empty.php
template displays a header and a footer only. A good starting point for landing pages.
Full Width Template
The fullwidthpage.php
template has full width layout without a sidebar.
Footnotes
[1] Visit http://browsersync.io for more information on Browser Sync
Licenses & Credits
- Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT documentation under CC BY 3.0.) and of course
- jQuery: https://jquery.org | (Code licensed under MIT)
- WP Bootstrap Navwalker by Edward McIntyre: https://github.com/twittem/wp-bootstrap-navwalker | GNU GPL
- Bootstrap Gallery Script based on Roots Sage Gallery:
5b9786b8ce/lib/gallery.php