Hive framework theme (WIP)

philwareham · 2020-10-13 09:28:04

Hi, as part of the upcoming themes site launch, I am planning to release a theme and supporting framework to help rapid site building.

I’ve had my own web design framework for quite a few years but not really applied it to Textpattern site builds in any meaningful way, and wanted a way to build a simple site rapidly in Textpattern.

Having used site builders such as Squarespace on a number of builds I’d quickly ran into the upper limitations of those services, not to mention the horrific underlying code they generate and shoddy site speed/performance on their hosting platform(s) – so I wanted to offer an alternative where site build budgets are limited.

I’m gradually building a set of modules within a theme where it’ll hopefully be quite easy to swap in and out modules and layout options. Plus the repo is quite Bootstrap-like in its setup – so if you wish to delve deeper into the build process you can easily change the CSS for a build via a curated set of Sass variables (for example to change the fonts used, colours, grid sizes, breakpoints, etc.).

Still a lot to build, some bugs to fix, and there’s scant documentation so far – but I’m interested in any feedback on the work to date.

To install, unzip the linked file below and place the folder into your themes directory, import and then assign the theme to sections in Textpattern.

To customise various options in the theme, see the form templates that start with filenames labelled --variables, within those are instructions on what you can modify via variables to alter the design of the theme layout directly within Textpattern.

NOTE: Requires Textpattern CMS v4.8.5 or newer. Contact form feature depends on install of com_connect plugin (if not installed, the theme bypasses that feature without error).

Textpattern Hive Framework: alpha preview v0.0.11

GitHub repo

Current modules

Various text/heading layouts.
Gallery in a few different layouts (carousel, masonry-like, grid with various grid-gap options).
Logo wall layout.
Blog layout and blog article listing.
Standard article (non-blog) layout and article listing.
Header with or withouts search field and site logo.
Footer with or without social channel links.
Shortcodes (more planned).
Pagination, OpenGraph, ARIA support, Schema.org microdata and JSON-LD built in as standard.
Modern front-end techniques such as variable font support, CSS Custom Variables, CSS Grid, Dark Mode support, and responsive (obviously!). This does mean that I absolutely won’t be supporting Internet Explorer with this theme.

Planned modules

Customisable homepage, via a misc-type form (just add in/remove modules for homepage via this single form).
‘Article card’-type listing layout.
‘Meet the team’-type layout.
Simple contact form (if com_connect plugin installed).
Pricing card layout.
Testimonials layout.
Anything else considered useful to site builds, within reason and scope.

Last edited by philwareham (2022-01-13 15:27:37)

Bloke · 2020-10-13 10:23:21

Super slick! Love that Start page layout. This’ll be brilliant with the 4.8.4 Override Form enhancements.

After installation, I assigned it to my ‘articles’ and ‘products’ sections (using the archive page), and my default section using the default page and it looks spiffing.

Gonna play with the other layout options later.

Thanks for putting this together. What a showcase for what Textpattern can do with themes.

gaekwad · 2020-10-13 10:24:59

This looks ace!

philwareham · 2020-10-13 16:12:33

I added a couple more placeholders into the homepage now (testimonials and pricing grid). These (and various other items on the homepage example) will eventually we made into proper Textpattern-powered modules as I move forward. Download link has been updated.

WebmistressM · 2020-10-13 17:35:43

For those curious on what this looks like, check out:

hive-framework.philwareham.co.uk/

For my next textpattern build, I have been thinking of what the base requirements are (what kind of functionality is needed, what types of content will be used, etc.) . My way of theming usually is revolving around those factors and the content. Your Hive theme looks nice and compact, simple. I too agree that some of the other CMS and plugins can create code that may be extraneous or add to load time. This one is slick and keeps it simple.

bici · 2020-10-13 19:50:56

Bloke wrote #326353:

Super slick!

Thanks for putting this together. What a showcase for what Textpattern can do with themes.

agreed!

Dragondz · 2020-10-14 07:47:41

Looks Great, Thanks Phil!

philwareham · 2020-10-14 13:32:45

Download link has been updated to v0.0.3.

I’ve moved various layout/style options to a form template called --variables.txp, in which you can amend the variable values as instructed to provide different layouts for certain parts of the page (such as logo in header instead of text, social channel links, etc.).

Any variables within the templates that are prepended with -- signify that they are user configurable options found in the --variables.txp file.

I’ll try to get as much of the config for the site into that single template file, rather than making users edit various templates to get their site layout how they want – within reason.

I think this is the best method. Only drawback I can see is that if a user updates the theme without making a copy of their customised --variables.txp anywhere first, then their file will be overwritten with default values again. Not sure there is any way around this (apart from making the user as aware as possible that this would happen).

Bloke · 2020-10-14 15:56:00

Customising things through variables is exactly the approach Jools took with our theme. Upgrades are a problem there too and there’s no great way around it yet. This is something we need to think about in some detail now.

As we evolve themes and (hopefully) bring across some of the goodness of package preview (a.k.a. verification prior to installation) akin to the way I’m building things for the Plugins panel, it should make it easier. In other words, theme installation/upgrade could become a multi-step process:

1) Upload files to the /themes dir, overwriting any that were there before, perhaps.
2) From Presentation>Themes, either Import (if new) from the dropdown or Update from disk (if already in use).
3) You’re presented with a preview of the files in the package, and checkboxes alongside the ones you wish to install, all preselected.
4) A ‘proceed’ button continues the import process, only bringing in the assets you selected (and potentially other stuff: prefs, plugins, blah blah).

Thinking out loud, if we allow theme authors to designate certain files in the manifest as ‘customisable’ then these can be automatically unchecked in step 3. So you’d have to explicitly toggle those on to trash your existing copies. Longer term it might even be possible to diff/merge, but that’s a bit dangerous, imo.

A less destructive – and potentially better – alternative approach to upgrades might be to put the incoming theme package into your /themes directory under a different name, e.g. hive_framework_v2. You could then import that alongside your existing theme, and simply Assign Sections, making the new theme your dev theme.

With the ‘*’ options set, all your existing pages will get their same assets so – providing the new theme isn’t radically different from v1 – it should upgrade seamlessly for you to test. If you’ve made any customisations in any forms or whatever, you can copy them over from the old theme to the new theme to merge the changes. Then when you’re ready and have tested everything, use the Deploy to Live feature. Job done.

I think the latter is potentially a better solution all round, rather than replacing files. The trouble is, with the manifest being the only place that holds the version number, we’re a bit hamstrung by this decision. Theme authors can, of course, choose to bundle their themes up with a version number as part of the directory name.

Maybe that’s something we should encourage? It’s slightly less seamless from a user perspective, because it requires users to click Assign sections and set up a dev environment, which means they have to have that option enabled in prefs.

Hmmm. It should be up to users really, but it’d be nice if we could supply some art direction!

philwareham · 2020-10-14 16:09:25

Thanks for the info Stef.

Well, I can easily add a version number to the end of the theme folder, it’s like about 2 lines of code in the build script to do that. I’ll add that in now for future preview releases.

EDIT: done.

Last edited by philwareham (2020-10-14 16:31:15)

anbys · 2020-10-15 15:51:16

真是一个非常棒的框架.
我只做了简单的修改,就得到了一个满意的页面.

我的英语非常差,只能用我的母语向工作者表示感谢.

Translation:

What a great framework.
I only made simple modifications and got a satisfactory page.

My English is very poor and I can only express my gratitude to the workers in my native language.

Last edited by gaekwad (2020-10-15 16:45:03)

bici · 2020-10-15 17:02:32

真是一个非常棒的框架

Awesome

Textpattern CMS

Textpattern CMS support forum

#1 2020-10-13 09:28:04