Frontstrap Frontity Theme

---

Frontstrap Theme

Primitive's Rolling Mountains | ❦ ☞ Beautiful Views

A starter theme for Headless-WordPress deployments with Frontity.
Frontity is not longer maintained and is being sunsetted as our framework. Not recommneded for use in production. »

View Demo · Report Bug · Request Feature

Built on the awesome, itty bitty, Frontity framework. With little help from our friends: Bootstrap, GSAP and ScrollMagic.
Made by Monkies ☙ ❦ 🐒 - 🐒 - 🐒 ❦ ❧
& crafted with ❤️ 🍌 ❤️

---

About The Project

This was created as an early experiment using Frontity as a headless CMS for WordPress. It was a great learning experience but the project got mothballed during Covid. We decided to fix a few issues with the existing deployment but are moving to an alternative approach for headless deployments.

Primitive Digital's Live Site 👉 Primitive Digital

GitHub 👉 @primitive/frontstrap

Theme NPM package ~ 👉 frontstrap (v1.0.x)

Rocks NPM package 🎉 ~ 👉 @primitive/rocks (v1.0.x)
Pebbles NPM package 🎉 ~ 👉 @primitive/pebbles (v1.0.x)
Scenes NPM package 🎉 ~ 👉 @primitive/scenes (v1.0.x)

Prerequisites

---

The following pre-requisites should be in place for the theme to work:

1. WordPress install of version 5.0 or later
2. Optional but highly recommended: register a domain
3. If deploying to Vercel install WordPress to a sub directory e.g. - wp.example.com
4. Posts permalink set set to: Custom Structure e.g. - /posts/%postname%/
5. Set homepage to a static page
6. Some features may require the use of the Advanced Custom Fields plugin

Installation & Development

---

*** Follow the Frontity setup outlined in their Docs ***

To use this theme You can install the theme and packages from the NPM/Github registry. You will need to extract the frontstrap package to edit 'src/components/dust/_config' and copy frontity.settings.js to the root of your project.

The simpler option is to clone the demo repo:

1. git clone https://github.com/primitive/frontstrap
2. cd frontstrap
3. npm install && npx frontity dev (from the project's root directory)

npx frontity dev

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The site will automatically reload if you make changes inside the packages folder. You will see the build errors in the console.

Deployment

---

*** Follow the Frontity deployment outlined in their Docs ***

npx frontity build

Builds the app for production to the build folder.

This will create a /build folder with a server.js (a serverless function) file and a /static folder with all your javascript files and other assets.

Your app is ready to be deployed.

Ω - the end

☙ 🐒 ❦ 🐒 ❦ 🐒 ❧

                                                                               
 _____       _        _                        _               
|     |___ _| |___   | |_ _ _    _____ ___ ___| |_ ___ _ _ ___ 
| | | | .'| . | -_|  | . | | |  |     | . |   | '_| -_| | |_ -|
|_|_|_|__,|___|___|  |___|_  |  |_|_|_|___|_|_|_,_|___|_  |___|
                         |___|                        |___|    

Mastering Markdown

---

🃏 This code is opensource so play like you mean business 🤓

Crafted by Primitive Digital

A quiet little corner where a Developer can go sit, scowel a bit, grumble a bit and think about what you've done...

Frontity supports Node >= 16. now at EOL Node 17+ uses OpenSSL 3.

• error:0308010C:digital envelope routines::unsupported"
• Openssl Enable Legacy Renegotiation
• node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

Seems fixed in Node 18

export NODE_OPTIONS=--openssl-legacy-provider

{
  "dependencies": {
    "local": {
      "frontstrap": "./packages/frontstrap",
      "@primitive/pebbles": "./packages/pebbles",
      "@primitive/rocks": "./packages/rocks",
      "@primitive/scenes": "./packages/scenes"
    },
    "published": {
      "frontstrap": "^0.0.12",
      "@primitive/pebbles": "^0.0.8",
      "@primitive/rocks": "^0.0.13",
      "@primitive/scenes": "^0.0.8"
    }
  }
}

Frontstrap V0.x Deployment:

• deployed to wordpress with frontity embedded mode plugin
• frontity hosted on VPS
• framework no longer maintained + is resource intensive/memory hungry. To be replaced with an alternate framework.

TO REVIEW + MIGRATE USEFUL BITS

• test issues with node 18 (kinda works)

• frontity.settings is dominant over package/index

• BS emotion warnings

• WebFonts: Tested as per docs. Implementation works but some google fonts don't convert well

• TBC. Some Google Fonts gets messed up converting to .woff/.woff2

• FIX: menu collapse / routing

• FIX: preloading

• Split primitiverocks package

• Split primitivescenes package

• Split theme / dev staging

• SEO: Add Site maps

• SEO: Frontity Blog

• Theme: WP Theme Bridge

• Add: react-spring

• Add: react-use-gesture

• Add: react-three-fiber

• Refine: Optimise for Mobile: Don't serve some animations on mobile, handle click/hover

• FIX or FEAT: author list view / profile

• FEAT: Fade in lazy loaded images?

• sort/filters: modify the wp theme funtions.php or use a plugin?

• sort/filters subtimeline component: custom cpt/taxonomy content (I can't seem to sort if using WP REST Filter plugin)

• sort/filters poststrip component: post and custom cpt/taxonomy content (recent, random, related)

• Research conditional loading of UI cores + theme

• Set base CSS to use none/twentytwenty/bootstrap (grid, classes, --modifiers-size/transparency/darken/lighten)

• Create shoelace theme (grid, size, color, breakpoints) + fragments

• Research create a UI/cf7 theme builder vs cli

• Research add comments / cf7 / fe content submission

• Add post social share

• Q: useEffect vs self-invoking

• Q: imports / conditional / slots?

• Claim primitive org on NPM 🙅 not accepted

• Claim primitive org on Github ✅

• Publish to npm (@primitive/rocks) ✅

• Publish to npm (frontstrap) ✅

• Publish to npm (primitiverocks)

• Publish to npm (primitivescenes)

• Publish to npm (primitiveone-theme)

• Publish to npm (primitiveone)

• Impliment CI/CD

Logs are somewhat of a rant. Packages created I was experimenting with different approaches and trying to get my head around the framework plus testing some capabilities of modern CSS specs vs CSS-IN-JS.