Alt Starter Kit

Starter Kit by Alt Design

Alt Starter Kit Main Screenshot

Our Alt Starter Kit, nowt fancy, chill vibes only (~‾‾∇‾‾ )~

The starter kit is essentially a template for any site build, consisting of a Header & Footer (including Navigation), basic Page Builder for page content, Globals for contact details and socials, and all of our Alt Addons.

From this you should be able to use the row types out of the box and just style the templates. If you require a field type that is not in the kit you may be able to duplicate a similar set and tweak it, or create a new set, but if it is something that’s commonly used let us know so we can add it to the kit! You can delete any that are not required (though they may be transferable).

The styling is very minimal, that’s for you to complete, however the templates are configured with glide.js sliders, {{ glide }} image manipulation, lazy/eager loading on images, Alpine.js on the mobile menu, and more to ensure we have the bulk of the key functionality and performance included from the off.

Contains Alpine.js so be sure to remove this (from composer.json and site.js) if using Livewire.

Installation

statamic new {site-name} alt-design/alt-starter-kit

npm install

Navigation

The 3 most common navigations are included and templated with a basic drop down menu and mobile menu (built with Alpine.js)

  • Main Nav = Header
  • Footer Nav = Footer
  • Footer Small Links = Privacy policy, etc

Globals

Contact details (including social links) have a blueprint in Globals and are templated in the footer. If the field is empty it won't show in the front end. Social SVG’s can have their colours set here including hover states.

Header

The header is templated with basic links and parent links with a dropdown.

On desktop the dropdown uses tailwind group on the parent and hidden group-hover:flex on the child.

On mobile it uses Alpine.js to open/close the nav and show/hide child links. The hamburger menu is easily customisable in /css/parts/hamburger.css:

:root {
    --color: #073548;
    --scrolled-color: #073548; /* if changing on scroll */
    --open-color: #073548; /* if changing on open nav */
    --height: 20px;
    --width: 20px;
    --line-weight: 2px;
    --line-gap: -7px;
    --hover-opacity: 1;
    --border-radius: 10px;
}

The navbar is set to be fixed by default so there are some classes to help with the offset:

:root {
    --navbar-height: 117px;
}

.spacer{
    height: var(--navbar-height)
}

html {
    scroll-padding-top: var(--navbar-height)
}

.h-screen-adj{
    height: calc(100vh - var(--navbar-height));
}

Footer

Very basic styling but the key components are all there. Any contact information comes from the site globals and won’t display if null. The social svg's have their colours set from admin. The site came comes from the APP_NAME in the .env file.

Fieldsets

Button

  • Button Text
  • Button Link
  • Class

Pagebuilder

Hero

  • Video, Single Image or Image Carousel
  • Background Tint Toggle
  • Title
  • Subtitle
  • Button

Wysiwyg

  • Wysiwyg

This with the full width image is normally the basis for blog posts, I’d normally copy them into a blog_page_builder so only these two are available. They both have a reduced width and should match each other’s width.

Full Width Image

  • Image

This with the wysiwyg is normally the basis for blog posts, I’d normally copy them into a blog_page_builder so only these two are available. They both have a reduced width and should match each other’s width.

Two Column

  • Image
  • Wysiwyg
  • Swap Sides toggle

Three Column - slider on mobile

  • Replicator (max 3)
  • Image
  • Title
  • Text
  • Button

This one can be the base for a lot of repeater rows, if 4 row for example increase the max number of sets and adjust template.

The template itself can be used for any data e.g. testimonials - create an entries picker and use that fields handle instead of {{ columns }}

Slider functionality added for mobile but easily removed if not required.

Logo Row

  • Logos in a slider with breakpoints for desktop/mobile

Page Header

  • Single Image
  • Background Tint
  • Title
  • Subtitle
  • Button

Similar to hero but single image only, max height 500px. Could also be used as a CTA.

Form

  • Title
  • Form

There is also form blueprint with name, email, telephone and message set up with some validation, and a basic template. The success message will scroll into view upon submission. In this form the honeypot is set to ‘username’ within the form config to help trick any bots - something to be aware of if you need a ‘username’ field.

Modal

Also included in /parts/ is a basic modal

On body / parent element:

x-data="{modalOpen: false}"

On button / element:

x-on:click="modalOpen = ! modalOpen"

On page :

{{ partial:parts/modals/center-modal alpine="modalOpen" title="Modal Title" }}

<div class="modal-body">
    <p>Content here</p>
</div>

{{ /partial:parts/modals/center-modal }}

It takes in a title, the alpine variable name and will {{ slot }} any content within the .modal-body

404 - Error page

There is a basic 404 page with a link back to home.

Alt Addons

All Addons are included in the install

{{ alt_seo:meta }} and {{ AltCookies:Toast }} are included in the template.

The cookies addon has classes on each element you can use to style

For Alt Akismet, remember to add ALT_AKISMET_API_KEY to your .env

JS

The js only initialises Alpine.js and Glide sliders. If using Livewire remember to delete the reference to Alpine here.

CSS

The css only has some basic classes for - Offsetting a fixed nav height (editable in :root) - Hamburger Icon (editable in :root) - Background tint on header images - Buttons - Wysiwyg - Glide bullets - Form fields

It can all be edited but should have the basics there to make it easy to customise any site.

Default Config Notes

By default the site only has a pages collection and blueprint (lined to the pagebuilder).

It is using the assets container and has image cache on (in config/statamic/assets)

Questions etc

Drop us a big shout-out if you have any questions, comments, or concerns. We're always looking to improve our addons, so if you have any feature requests, we'd love to hear them.

Also - check out our other addons! - Alt Cookies Addon - Alt Redirect Addon - Alt Akismet Addon - Alt Inbound Addon - Alt Sitemap Addon - Alt Password Protect Addon

Postcardware

Send us a postcard from your hometown if you like this addon. We love getting mail from other cool peeps!

Alt Design
St Helens House
Derby
DE1 3EE
UK