Skeleton. for Statamic
A starter configuration with an antlers based component library for statamic websites.
Skeleton comes pre-packaged with:
This guide will help you get started using skeleton. It runs through some of the core configurations, components, and best-pratices.
Components.
Buttons
The button component is a single component that can act as link or a button.
If the button is provided with a href it will resolve to a link element otherwise it will resolve to a button, all relevant attributes will be available.
The button is pre-configured with styles and variants set by a switch statement within the component.
[button]
Containers
Containers are setup for flex and video layouts so reposive behaviour is consistent.
[bard]
Bard containers are used to template any statamic fields that are set to bard. This component just needs to be passed the relevant field handle as a prop to work.
[video]
Video Embed
Video caption
Embedded video from youtube.
Video Upload
Video caption
Display
Display components include any component that conditionally display content on the screen..
[drawer]
Title.
Content.
[modal]
[popup]
Popover Title
Popover content can be chucked in here.
Feedback
Components that send a response to user changes and interaction on the front end.
[toast]
Icons
Icon uploading and templating.
[icon]
Icons can be uploaded to a dedicated SVG folder in SVG format in the CMS and templated as SVG files. Alternatively, an image file can be used and will be templated with the img HTML element.
Image
Icons can be uploaded to a dedicated SVG folder in the CMS and templated as SVG files.
Inputs
Inputs that can be used independently or to build form structures.
[checkbox]
[error]
Please input a valid email address.[file-upload]
[input]
[label]
[radio]
[select]
[textarea]
[toggle]
Layout
Layout blocks designate large consisntent areas of sites layout structure.
[sidebar]
← This is the sidebar.
Navigation
Components that relate to the navigation state of the site.
[breadcrumbs]
- Home
[pagination]
Pagination can be applied to any collection loop that has pagination enabled. Place the pagination componnent inside the collection loop. The compoennt is configured by the collection loop variables.
Surfaces
Components that display on the page.
[accordion]
Read More ↓
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
[social-item]
Utility
Components that are used for the core functionality of the website.
[cookie-notice]
The cookie-notice works out-the-box, it is already in the layout file.
[unsupported-banner]
The unsupported-banner works out-the-box, it is already in the layout file.
Page Builder.
Page Builder
Page builder setup and usage.
The page builder contains all the 'content blocks' used across the website, it utilises the default page template. New blocks and can be confgured as 'fieldsets' and added to the bulder. Example blocks are shown below.
For reference the 'Page Builder' fieldset is included as default and can be found pre configred with core components in the CMS.
Content Blocks
Content blocks built within the page builder fieldset.
Content blocks are used for templating page content from Statamic, each templated page should be blueprinted with the 'Page Builder' fieldset which contains all the available content blocks.
[carousel]
Forms.
Forms
Form configurations for statamic and laravel databases.
Forms can be registered with the 'register' function in the forms.js file. There are some props to get familiar with when registering forms depending on whether the form is communicating with statamic or a laravel database.
[statamic form]
Statamic forms should be configured in the CMS and the inputs will be generated based on the forms blueprint. The required tab in each inputs settings makes use of laravels built in validation. This is the reccomended way to format statamic forms.
Styles.
Tailwind CSS
Our skeleton CSS configuration.
Skeleton uses tailwind for management of CSS. All custom values are delcared and configured in the tailwind.config.js file. These values are then available in any file included in content array within the config file.