Introduction

This is a minimal boilerplate using Tailwind CSS that can be used as a starting point for coding html and css templates that can easily be integrated into WordPress Falcon themes.

We believe that this is the best way to build WordPress themes because it will allow developers that are not familiar with WordPress to build templates. Later those templates made in this boilerplate can be easily integrated into WordPress theme.

How to use

Requirements

• You need to have Node.js installed on your machine.
• You need to install npm install -g grunt-cli in order to run project normally
• Run npm install to install all dependencies.
• Install browser-sync globally npm install -g browser-sync

How to run

When you have installed all dependencies, you can run projecy by running some of the following commands:

Script name	Description
production	Creates a production (minified) build of app.js, app.css and editor-style.css.
dev	Creates a development build of app.js, app.css and editor-style.css.
watch	Runs several watch scripts concurrently.
watch-sync	Refresh browser automatically if something is changed.

A script is executed through the terminal by running npm run script-name. Exammple npm run watch.

Importnt Folders

• assets - This folder contains all the assets that are used in the project. Some of assets that are here are autogenerated app.css and app.js files.
• dist - This folder contains all the files that are compied templates
• includes - This folder contains all the files that are included in the project.
  • parts - Those are typically parts of the templates that are included in every template. For example header.html, footer.html, sidebar.html,
  • patterns - Templates it self are built from patterns.Those are sections of website that are used to build website. For example hero.html, features.html, testimonials.html, etc.
• templates - This folder contains all the templates that are compiled from patterns and parts. Template represent a unique page on the website. For example home.html, about.html, contact.html, etc. Templates are built from patterns and parts.

Importnt Files

• browsersync-config.js - This file contains configuration for browser sync. Feel free to change it to your needs.
• Gruntfile.js - This file contains seeting that are used to compile templates and Server Side includes (SSI) files. Html don't have includes by default so we need to use grunt to compile them.
• **package.json **- This file contains all the dependencies that are used in the project. Also here are defined all the scripts that are used to run the project. Like npm run watch, npm run dev, etc.
• tailwind.config.js - This file contains all the tailwind configuration. Feel free to change it to your needs.

Layout

This is very important section because it explains how to build templates from patterns and parts.

• Every template need to have header, footer and main section. All of theme are wrapped with div that hase class wp-site-blocks. You should always use this structure in templates. You can offcourse in some casies remove header and footer but you should always have main section and div with class wp-site-blocks.

• container - This class is defined in tailwind.config.js file. This class will make browser padding on left and right side and will center content on the middle of page by default. This is also important class to use in templates.

• is-layout-constrained - This class is used to make layout constrained. This means that content will be centered and will have max width. Max width will be defined in theme.json file. "layout": { "contentSize": "960px" },

• is-layout-flow - This class is used to make layout flow. This means that content will inherit width from parent element. This is default layout.

• alignfull - This class is used to make element full width. This is used for example for full width hero section. In many cases width of some sections like footer, header etc need to be full width and to go outside of container or constrained layout. With this class you can do that.

• alignwide - Similar to alignfull but this class is used to make element wide. This means element will go out and will take max width defined in theme.json "layout": { "wideSize": "1280px" },

block-gap

• There is rule called block-gap. This means it adds gap between every element this rule is defined by a few selectors. - This is used to add space between elements. You can offcourse remove this rule or change it to your needs. Just do it in custom.css file.

  • :where(.wp-site-blocks)>* { margin-block-start: 1.2rem; margin-block-end: 0; }
  • :where(body .is-layout-constrained)>* { margin-block-start: 1.2rem; margin-block-end: 0; }
  • :where(body .is-layout-flow)>* { margin-block-start: 1.2rem; margin-block-end: 0; }

Note: There is class that removes this rule and that is

• .no-block-gap-for-children - Put on parrent element and it will remove block-gap for all children elements.
• .no-block-gap - This class will remove block gap only for this element.

Note:

Here are detailed instructions for both Designer and Developer regarding layout with a few examples.

• https://docs.google.com/document/d/1JVCrToy1knc4k3n0o7U_SdNviv3SUXDZ-3FeROl2-74/edit?usp=sharing

Imporant Notes

**wordpress-global-styles.css **- This file is used to style WordPress blocks. This file is generated by wordpress and you should not edit it directly. You should always export this file from active wordrpess theme and replace it in this project.

wordpress-normalizer.css - Do not edit this file since this is made to normalize styles for WordPress but also to keep Tailwind intact. You should not edit this file at all. If you need some changes writte ticket to our github repo

COLORS

Colors are defined in tailwind.config.js file. You can change them there. No matter how many colors are designed you sould always have three primary groups of colors. Those are base, secondary, accent. Those colors are used on 90% of places and all other colors are used on 10% of places.

Styling BUTTONS & PICTURES

Examples of pictures and buttons can be found in includes\patterns\page-single-article.html. Here we will use just simple example

PICTURES

Pictures always need to be inside figure tag. There is no other limitations for pictures

Sytling

HTML Structure

<figure class="wp-block-media-text__media">
        <img decoding="async" src="../assets/images/default-image-one.png" height="400px" alt="Golden Gate Bridge" />
</figure>

<figure class="wp-block-media-text__media">
        <img decoding="async" src="../assets/images/default-image-two.png" alt="Boardwalk" height="400px" class="wp-image-757 size-full">
</figure>

BUTTONS

Sytling

There is global style for buttons that covers base styles of buttons. This is defined in wordpress-global-styles.css. Changes and additions to this style should be made in There is file called buttons.css resources\css\block-styles\buttons.css

Key to styling is that you keep button structure and that you use is-style-fill, is-style-WHATEVER class to style button. Also it is important to keep wp-block-button__link class on a tags.

HTML Structure

This is structure of all buttons / links that look like a button on design. Button canot be just a button without button-group wrapper.

ONE BUTTON

<div class="wp-block-buttons">
        <div class="wp-block-button is-style-fill">
                <a class="wp-block-button__link wp-element-button">Button</a>
        </div>
</div>

MORE BUTTONS

If you want to put more buttons you shoud do that like this:

<div class="flex wp-block-buttons">
        <div class="wp-block-button is-style-fill">
                <a class="wp-block-button__link wp-element-button">Button</a>
        </div>
        <div class="wp-block-button is-style-outline">
                <a class="wp-block-button__link wp-element-button">Button outlined</a>
        </div>
</div>