Statamic is a flat-file CMS powered by Laravel. When I started using it a few years ago, I was immediately sold. Statamic made me faster and better at creating custom made client websites as it has the tools I need on a daily basis. With its flexibility and a gorgeous interface, it's far above the competition for me.
I found myself creating and having fun. I started reusing code, templates, and methodologies that worked on all my Statamic projects. Even when being custom made, most websites share similar principles. When the anticipated v3 came out, I decided to rewrite and bundle my bag of tricks for v3 and release it as a Starter Kit called Peak.
The Starter Kit
Peak is an opinionated starter kit for all your Statamic sites. The kit is design agnostic but comes bundled with tools like Tailwind and AlpineJS. It enforces a workflow in which you can build anything you want as DRY as possible.
Highlights include a page builder, full-blown professional SEO integration, a customizable implementation of Tailwinds configuration, and a whole lot more. The aim is to get you started on your clients' site straight away, as Peak is easy to extend or edit to fit your clients' website needs. The ultimate goal is to get us to share and work together to make our websites and tools better. The kit is getting more popular and often receives PRs.
If you use Tailwind and AlpineJS this is your way into the wonderful world of Statamic.
Blueprints, fieldsets, and the power it brings
Statamic comes with a rich selection of fieldtypes. When starting out, however, it can be overwhelming. This is where Peak comes in. The majority of its features are made using those native fields and templating options. This means you can skip the mundane task of setting up the same stuff for each of your websites.
Page builder
While you could make different templates for all your page types, the idea is to make your pages as modular as possible without giving your customer that much freedom to ruin the design. Every unique element of your website could be a partial (a Statamic template part) and a dedicated button in the page builder. This way, you can add forms, link blocks, collection entries (for example, recent news or highlighted portfolio items), or long-form content to your pages.
All blocks you add to the page builder are spaced out evenly in a single column grid, so you don't have to think about top or bottom margins. As with everything, the grid is customizable in the tailwind config files.
It's important to note that this is not a page builder you might know from a CMS like WordPress. This page builder gives you structure and semantically valid markup. The design is all up to you.
One of the blocks in the page builder is the Bard field. I call it Article in the page builder as it's intended for long form content. The Bard field features restricted text editing and has its own fieldsets. Peak ships with default sets like responsive images, buttons, video embeds, pull quotes, or a content table. Since the text and sets you add to your long-form content is laid out in its own grid you can let images break out of the content and add this pattern to your own bard sets.
SEO
While the Statamic ecosystem has multiple fantastic paid options for SEO plugins, it's not that hard to accomplish full SEO support with native fields and templating. This is what you get with Peak. Global site options for features like JSON-ld, an auto-generated XML-sitemap, default OG images, and tracker integration for Fathom, Google, and Cloudflare. On top of that, you can enable a cookie banner with the flick of a button. You no longer have to fear a marketeer asking you to integrate Google Tag Manager. Since we use Tailwinds configurable design system, the design of the cookie banner, and all other templates, will respect your sites brand by default.
On entry pages, you get support for all the basics like OG tags, a meta description, a no-index toggle, custom JSON-ld and canonical URLs. When you use multisite Peak will automatically add the correct hreflang tags. Using Pagination? It automatically adds pagination links to the document head.
Tailwind
Peak heavily uses Tailwind and configuration files to set up your site. I've split up the configuration into multiple files:
-
tailwind.config.jsis the base file in which you import all your other config files and define configurations like purge, darkmode, and the variants you wish to use. -
tailwind.config.peak.jscontains all utilities for Peak like the outer site grid and the grid and sizing utilities for your long form content. -
tailwind.config.typography.jshere you customize the optional tailwind typography plugin; by default, it uses all your currently defined site colors from: -
tailwind.config.site.jsis the config file you'll spend most of your time in. As here you define the colors and typography for your current project. Since Peak uses color naming likeneutral,primary,secondary,error,warning, andred, all partials will auto-update their styling to your configuration. This makes it a breeze to get started while maintaining the option to go custom.
Personally, I define 100% of my custom CSS in those config files as it makes sense to me to do this as centralized as possible, preferably in one language. If you however, prefer to use @apply, there's a CSS file supporting PurgeCSS layers ready to use out of the box.
Other highlights
Before winding up, I think there are a few more things worth mentioning:
- One of the things I don't enjoy is making forms and form e-mails. Using the native tools, Statamic offers, Peak gives you autogenerated forms and e-mails with a nice default styling. Forms in Peak use AJAX, so you can utilize full static caching to keep your website as fast as possible. The mails are fully localizable and take all their site-specific variables from your
.envor localized strings. - While I'm not an accessibility expert, I do try to keep up and implement best practices in all partials. Peak implements
focus-visibleand respects reduced motion preferences. The same goes for semantics. The way the page builder is set up, you don't have to worry much about screen readers and reader modes. Follow along with the tags used in the default templates, and your long form content should work beautifully in Safari's reader mode, for example. - Peak automatically generates the favicons for modern browsers based on one SVG image.
- You can add redirects for non-existing URLs via one of the global config pages.
- There's a whole bunch more helpful stuff in this kit like typography partials, Tailwind helpers, default scripts for Ploi and Forge, and an example project readme. Go and find out for yourself.
Winding-up
It's a joy to work with Statamic on a daily basis, and it's fantastic to work on this starter kit. Not just because I use it, but because others use it as well. It's great to give something back to the Statamic community I've come to love.
I hope this post makes you curious about Statamic and how you can create custom made websites with it. While having fun! I urge you to check it out and see how productive it makes you. They have multiple price tiers, including a free plan.
Feel free to reach out to me on Twitter or e-mail if you have any questions.
Rob is a freelancer with over 15 years of experience in teaching, usability, design, and web development.
