Acorns

If you are looking for a complete website template, keep looking!

This is a starting point for custom projects and will be updated over time. The intent is not to make this a complete package, but to skip the slog of making a typical row/columns page builder.

Includes what is needed to have a row fieldset that supports between 1 and 12 columns. Each row and each column have controls over the background color, image, and a background image's opacity, as well as row padding.

These are sane defaults for building pages with an arbitrary row/column structure.

Near-term Roadmap

• [x] Add row/column editor with background control
• [x] Add jQuery-based scrollTo anchor feature
• [x] Add jQuery-based slider
• [x] Add links -> buttons toggle
• [x] Add automatic default Assets container for those installing SK fresh
• [ ] Add row proportion options (1/3 - 2/3, etc)
• [ ] Add automatic tailwind configuration appending

Screenshots

Fieldset

Live Preview 1

Live Preview 2

Installation

• You must have an Assets container defined as "assets"
• Add "Rows" fieldset to your Blueprints
• In your front end template, replace your typical {{ content }} tag with {{ partial src="acorns/rows" }}
• In order to auto-scroll to a page section, set a row anchor, then make a link starting with a # and the name of the row anchor
• Sliders are in - configure them in /resources/js/acorns.js

// tailwind.config.js

module.exports = {
  content: [
    './resources/**/*.antlers.html',
    './resources/**/*.antlers.php',
    './resources/**/*.blade.php',
    './resources/**/*.vue',
    './content/**/*.md'
  ],
  safelist: [
      {
        pattern: /grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)/,
        variants: ['sm', 'md', 'lg', 'xl'],
      },
      {
        pattern: /py-(1|2|3|4|5|6|7|8|9|10|11|12|24)/,
        variants: ['sm', 'md', 'lg', 'xl'],
      },
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Developer

Made by Jonathan Malko at https://shoutmedia.net - find me on the Statamic discord or email me at [email protected] with any questions or requests!