AWSM F1 – Introducing our free theme for Frontity

Aravind Ajith

Sun Sep 13 2020

We have finally launched our first 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.

Our affair with Frontity started with an attempt to redesign our website. We built a super-fast website and then continued the journey to integrate it into our plugin WP Job Openings. It was indeed a thrilling experience!

Even after our site was up and running and received warm accolades from different corners, we were confronted with the What-Next question. Frontity had not yet lost its attraction and then we thought why not build a theme?

The end result of that question is AWSM F1. You can view a demo of the theme here.

AWSM F1

AWSM F1 is a starter theme for Frontity, the React framework made for WordPress. Out of the box, it packs support for common Gutenberg WordPress editor blocks and more importantly, you can extend it to further support any blocks.

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.

AWSM F1 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. 

Awsm F1 is the result of our first attempt at building a theme. Like all products from the Awsm family, it is super-simple to use but packs a punch. It enables easy customization and styling of blocks and also extends support for third-party Gutenberg block plugins. There is also scope for more customization and has layout building options with Bootstrap.

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.

NPM Package – https://www.npmjs.com/package/@awsmin/f1
Git Repository – https://github.com/awsmin/f1