This repository has been archived on 2020-05-08. You can view files and clone it, but cannot push or open issues or pull requests.
understrap/README.md

156 lines
7.3 KiB
Markdown
Raw Normal View History

2019-12-14 11:51:28 +00:00
[![Build Status](https://api.travis-ci.org/understrap/understrap.svg?branch=master)](https://travis-ci.org/understrap/understrap)
[![Wordpress Theme Version](https://img.shields.io/wordpress/theme/v/understrap.svg)](https://wordpress.org/themes/understrap)
[![Wordpress Theme Active Installs](https://img.shields.io/wordpress/theme/installs/understrap.svg)](https://wordpress.org/themes/understrap/)
[![Github Last Commit](https://img.shields.io/github/last-commit/understrap/understrap)](https://github.com/understrap/understrap/commits/master)
[![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0)
2017-01-26 18:11:16 +00:00
2017-02-03 13:43:36 +00:00
#### See: [Official Demo](https://understrap.com/understrap) | Read: [Official Docs Page](https://understrap.github.io/)
2016-05-02 15:41:24 +00:00
# UnderStrap WordPress Theme Framework
2016-12-15 15:23:58 +00:00
Website: [https://understrap.com](https://understrap.com)
Child Theme Project: [https://github.com/understrap/understrap-child](https://github.com/understrap/understrap-child)
2019-12-06 10:50:24 +00:00
OverStrap Child Themes: [https://understrap.com/overstrap/](https://understrap.com/overstrap/)
2017-02-03 13:43:36 +00:00
## About
Im a huge fan of Underscores, Bootstrap, and Sass. Why not combine these into a solid WordPress Theme Framework? Thats 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.
2017-02-03 13:43:36 +00:00
2016-06-04 10:54:58 +00:00
## License
UnderStrap WordPress Theme, Copyright 2013-2018 Holger Koenemann
UnderStrap is distributed under the terms of the GNU GPL version 2
2016-06-04 10:54:58 +00:00
http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
2016-05-02 15:41:24 +00:00
## Changelog
2016-11-14 09:44:42 +00:00
See [changelog](CHANGELOG.md)
2016-05-02 15:41:24 +00:00
## Basic Features
- Combines Underscores PHP/JS files and Bootstraps HTML/CSS/JS.
2016-06-24 05:53:19 +00:00
- 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.
2016-12-03 17:36:14 +00:00
- [Font Awesome](http://fortawesome.github.io/Font-Awesome/) integration (v4.7.0)
2016-05-02 15:41:24 +00:00
- Jetpack ready.
- WooCommerce support.
- Contact Form 7 support.
2019-12-14 11:10:15 +00:00
- [Child Theme](https://github.com/understrap/understrap-child) ready.
2016-05-02 15:41:24 +00:00
- 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? Thats 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 "theme/theme_variables"; // 1. Add your variables into this file. Also add variables to overwrite Bootstrap or UnderStrap variables here
@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
```
2019-07-18 16:21:25 +00:00
- Dont edit the number 2-4 files/filesets listed above or you wont 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`.
2016-05-02 15:41:24 +00:00
## Installation
2019-07-18 16:21:25 +00:00
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.
2016-12-15 15:23:58 +00:00
### Classic install
- Download the understrap folder from GitHub or from [https://understrap.com](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/`
2016-05-02 15:41:24 +00:00
- Login to your WordPress backend
- Go to Appearance → Themes
- Activate the UnderStrap theme
2016-12-15 15:23:58 +00:00
### npm install
- Open your terminal
2017-01-26 18:11:16 +00:00
- Change to the directory where you want to add UnderStrap
2016-12-15 15:23:58 +00:00
- 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]
2016-05-02 15:41:24 +00:00
### 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
2016-12-15 15:23:58 +00:00
- 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:
```javascript
{
"browserSyncOptions" : {
"proxy": "localhost/theme_test/", // <----- CHANGE HERE
"notify": false
},
...
};
```
- then run: `$ gulp watch-bs`
## How to Use the Built-In Widget Slider
2016-05-02 15:41:24 +00:00
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”.
2016-05-02 15:44:09 +00:00
- Thats it.
2016-11-14 09:32:37 +00:00
## RTL styles?
Add a new file to the themes root folder called rtl.css. Add all alignments to this file according to this description:
2016-11-14 09:32:37 +00:00
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
2016-04-29 13:31:03 +00:00
[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync
2016-06-21 17:00:08 +00:00
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
2016-11-14 12:42:19 +00:00
- Bootstrap Gallery Script based on Roots Sage Gallery: https://github.com/roots/sage/blob/5b9786b8ceecfe717db55666efe5bcf0c9e1801c/lib/gallery.php