Fridays for Future Paderborn Wordpress Theme 🌱

This is a wordpress theme for the official Fridays for Future Paderborn Website.

WordPress Local Setup

Download local by flywheel, install, and run a local instance.
Import theme in your site in app/public/wp-content/themes/ using git clone https://github.com/raphaelreimann/fridays-for-future-paderborn-theme
Activate theme in the Wordpress Admin Panel

Initial Setup

This theme uses WPGulp for "An advanced & extensively documented Gulp WordPress workflow".

To start developing your theme follow these instructions:

Open wpgulp.config.js and edit the projectURL variable.
Run npm i in the same directory as this theme.
Run npm start.

Once these steps are complete, you only need to run npm start moving forward.

Assets

Styles

assets/css/style.scss is the main stylesheet that contains all partials. This is compiled into style.css.
assets/css/bootstrap contains the Bootstrap core .scss files and should not be edited. Instead use assets/css/base/_bootstrap_overrides.scss to override the default variables.

Javascript

assets/js/custom contains any custom javascript files. By default it comes with two scripts generated by Underscores. All files in this directory are compiled into assets/js/custom.js and assets/js/custom.min.js. By default the themes loads assets/js/custom.min.js.
assets/js/vendor contains any vendor javascript files. This is also where bootstrap.js is loaded. All files in this directory are compiled into assets/js/vendor.js and assets/js/vendor.min.js. By default the themes loads assets/js/vendor.min.js.

Images

Place any images into assets/img/raw. From there, they will be optimized and placed in assets/img.

Overriding Bootstrap Variables

If you wish to override Bootstrap's default variables, do so by redeclaring those variables in assets/css/base/_bootstrap_overrides.scss. Use assets/css/bootstrap/_variables.scss as a reference for all existing variables, but DO NOT update this or any other file located in assets/css/bootstrap/.

More information on variable defaults

For more questions about Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/introduction/

Automatic Form Styling

Bootstrap does not style form elements be default. Instead, a developer must manually add the correct classes to each form element.

In an effort to streamline this process, this theme automatically styles all form elements by extending the .btn class on these elements. These styles are located in assets/css/base/_forms.scss.

Base WordPress Styles

Some css classes are required by WordPress and therefore should be included in a WordPress theme. These, and other WordPress specific styles generated by Underscores are located in assets/css/base/_wordpress.scss.

raphaelreimann / fridays-for-future-paderborn-theme