Skip to content

This is a slice library for slicemachine by prismic. Check out the demo & Storybook links in the readme.

License

Notifications You must be signed in to change notification settings

samuelhorn/pixelslices

Repository files navigation

Pixelslices logotype

Pixelslices

A neat slice library for Slicemachine by Prismic. Consisting of 6 slices and 2 partials for header and footer.

A note on color mode: To change between light and dark mode in the Storybook you have to push the switch in the header partail. I have not found a way to connect Storybook's knobs to @nuxtjs/color-mode, I will try to make it possible to switch on every slice in the future.

Partials

The Header

The header, containing a logo, a name and a theme switch to switch between light and dark mode. This works in Storybook as well, but has to be changed in this partial.

The footer

A partial for the bottom of the page, just containig stuff for the demo right now.

Slices

The Hero

A bold hero with a big headline wich can be branded in different colors and aligned in three ways. Also has the ability to add CTA buttons.

The Form

A simple form builder slice for text fields of different types, connects automatic to Netlify Forms.

The Slider

Slider slice which can be used with background images or icons, with or without ppagination bullets that can be colored in different ways.

The Accordion

Repeatable accordion elements that folds out on click, can be branded in different colors.

The Image

A slice to display an image with caption, either centered, in full with or aligned to any side.

The Text

A slice for rich text with the ability to use one, two or three columns.

Storybook & Demo

Storybook Netlify Status

Demo Netlify Status

Setup & development

# Install Prismic CLI
$ yarn global add prismic-cli@3.8.3-beta.0

# Install dependencies
$ yarn install

# Serve Nuxt app at http://localhost:3000
$ yarn dev

# Serve Storybook at http://localhost:3003
$ yarn storybook

# Serve Slicemachine ui at http://localhost:9999
$ yarn slicemachine

# Create a slice
$ yarn sm --create-slice

# Generate static Nuxt site
$ yarn generate

# Generate static Storybook site
$ yarn build-storybook

Read more

Read more about Nuxt.js. Read more about Slicemachine.

About

This is a slice library for slicemachine by prismic. Check out the demo & Storybook links in the readme.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published