AWSM F1 - A new starter theme for Frontity, with Gutenberg block support

We have launched our first Frontity theme ‘AWSM F1’, a starter theme for Frontity, the React framework made for WordPress. Out of the box, the theme provides support to common Gutenberg WordPress editor blocks and more importantly, you can extend it to further support any blocks.

Frontity has massive potential to become the future of WordPress, especially with the Gutenberg editor powering now in its backend. However, there has not been any serious Frontity-Gunteberg integration seen so far. At least not in a starter theme.

That’s where AWSM F1 comes in. It is the first Frontity starter theme that uses all the potential of Gutenberg-Frontity combination to spinout a solid headless WordPress site in React.

We have included a bare-minimum Bootstrap CSS which combines the following Bootstrap CSS/SCSS files: functions, variables, mixins, root, reboot, type, grid, forms and utilities from the latest version. This essentially provides a starting point for resetting browser defaults, typography styles, from styles, creating custom layouts/grids and adding responsive breakpoints. Please note that we have not included any Bootstrap JS files.

The theme also adds support for WP Job Openings WordPress plugin that combines our WP Job Openings Frontity package. All the default fields and the fields supported by WP Job Openings Pro are also supported in the job application form.

Theme Structure

We have divided the theme files into different sections for better understanding. This includes:

• Footer – Which contains the Footer section with footer menu, widgets and copyright section.
• Header – It includes the top header section which contains logo, menu and responsive modal menu configurations.
• List – This section holds the posts and WP Jobs list or archive page structure.
• Pages – It contains custom page layouts for Homepage, about page, career page etc. We have included a common page.js file combining most of the Gutenberg block layout.
• Style – It contains the Gutenberg block library styles and the bare-minimum bootstrap css files.
• Then we have the post.js file which is essentially your individual blog pages.

By default, the theme includes the default styles of Gutenberg blocks taken from the WordPress core block library.

(You can find it in your wp-includes\css\dist\block-library\style.css and wp-includes\css\dist\block-library\theme.css)

In addition, we have included certain theme-specific styles to the page and post templates.

Installation and Theme settings

To install AWSM F1 theme on any Frontity project use the code

npm i @awsm/f-one

Then configure the AWSM F1 theme settings via the frontity.settings.js file. The theme options can be specified in the state.theme property under packages.

Using Gutenberg blocks

In order to add custom styles to your Gutenberg blocks, you first need to add the blocks inside a “Group” block and assign a CSS class(es) to it. Then you can use this CSS class(es) to style the entire block along with all sub-blocks inside the group block.

Demo: https://awsm-theme.vercel.app/
NPM Package: https://www.npmjs.com/package/@awsmin/f1
Git Repository: https://github.com/awsmin/f1
CodeSandbox: https://codesandbox.io/s/github/awsmin/f1

This is literally just a starting point for Frontity. That’s what “F1” is all about. What you can build on it is limitless. All we wanted to do is to build a solid starter theme that will encourage more developers to try and start using Frontity to build their projects.

Pull requests and forks are welcome. You can use this code freely for your own projects and/or experiments. If you have any suggestions or questions feel free to write a message.