Frontity is a free and open-source framework for creating WordPress themes based on React JS. In other words, it allows you to build a React frontend for a headless WordPress site, which serves its data via the WordPress REST API. Frontity grabbed everyone’s attention when Automattic, the company headed by WordPress co-founder, Matt Mullenweg invested €1 million earlier this year.
The team behind the Frontity framework officially made it open source in May 2019, after battle testing it internally. In one year the framework has more than 12,700 npm downloads and has built a community of 250 developers who use it.
Using Frontity, you can build your own theme from scratch matching all your needs or use a ready-to-use one, which will make it much easier. The latest addition to the list of themes built using Frontity is the AWSM F1, a starter theme that provides support for common Gutenberg WordPress editor blocks.
Before going to the details of the brand new theme AWSM F1, let’s make a recap of what Frontity is and why it’s relevant.
What is Frontity?
When it comes to building a website, there is no lack of JavaScript frameworks that will allow you to create beautiful and functional front ends. However, when it comes to running a headless WordPress site, it is easy to get bogged down with the particulars of WordPress and the process of fetching data using the WordPress API. That’s where Frontity comes in.
Frontity is a framework that has been optimized to work perfectly with WordPress. Packages are accordingly fetched from the WordPress API and are converted into data that can easily be handled in React code leaving you more time to focus on your front end.
Thus, Frontity provides a seamless connection between WP’s REST API and your React app. Without Frontity, this connection is much more complex to configure.
Frontity’s React-powered framework digests your WordPress site’s API and builds the entire front end in React with all the powerful tools you have come to expect from that type of environment. Using Frontity you can actually spin up a WordPress website in React in literally 2 lines of code!
The ‘React’ Affair
Combining WordPress and React is a powerful way to build web applications. It’s not a secret that WordPress has been longing to move to the direction of ReactJs. It is more than ever one of the best frameworks out there: flexible & reusable component system, virtual DOM, efficient workflow with JSX, etc.
WordPress.com had moved its dashboard to React in their famous ‘Calypso’ update in 2015! And the new native website builder interface – Gutenberg block editor is completely built-in React.
AWSM F1
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.
Designed and developed by Awsm Innovations, the team behind wp-content.co and a few highly rated WordPress plugins, this theme enables easy customization, the styling of blocks and extends support for third-party Gutenberg block plugins. It is also well-integrated with plugins like Contact Form 7, Yoast and WP Job Openings.
The theme includes 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 is essentially provided as a starting point for resetting browser defaults, typography styles, from styles, creating custom layouts/grids and adding responsive breakpoints.
You can view a demo of the theme in this link. Many standard pages are also included in the theme and they are all built out of Gutenberg. Besides, the theme has been designed keeping SEO in mind and as search engine friendly as possible.
AWSM F1 has everything you need to create a secure, SEO-friendly powerful website without the bloat. The theme is not only great for developers who are new to Frontity but also for those who have a specific use-case in mind and prefer to use a theme as the base for their site instead of starting from scratch.
We suggest you check the following links for more details about the theme.
- Demo – http://awsm-theme.vercel.app/
- NPM Package – https://www.npmjs.com/package/@awsmin/f1
- Git Repository – https://github.com/awsmin/f1
- Open in CodeSandbox – https://codesandbox.io/s/github/awsmin/f1