Papertrain is a Craft 3 Framework for a Modern Webpack Development Setup
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_papertrain
app
build-tools/config
config
modules
public
storage
templates
.editorconfig
.env.example
.gitignore
.stylelintrc
.tslintrc.js
CHANGELOG.md
LICENSE
README.md
composer.json
composer.lock
craft_papertrain_2018-12-07.sql
package-lock.json
package.json
postcss.config.js
tsconfig.json

README.md

Papertrain - A Craft 3 Boilerplate

Papertrain is a frameworks for Craft 3 using a modern webpack setup. It includes SASS snippets from Intuit and grid system concepts by Harry Roberts.

Getting Started

TODO: this

CSS

SASS Import

  1. Settings: global variables and colour pallets.
  2. Vendors: bourbon mixins for base utility @include size(x, y)
  3. Tools: site wide mixins.
  4. Generic: low level far reaching generic element settings.
  5. Base: css for unclassed HTML elements p {}, blockquote {}, ul {} go in page.
  6. Objects: generic objects and object elements .o-youtube-video.
  7. Components: complete secitons of UI .c-dca -copy.
  8. Templates: css for specific template pages, used to style individual and unique elements within a page.
  9. Utilities: generic utility selectors, used to adjust elements in a very specific way .u-text-center

Grid

Uses a inline-block gird system by Intuit.

Start by inserting a .o-layout block and add a .o-layout_item element within the block. Initial blocks are width: 100%, additional values are avialable using .u-1/2 .u-1/3 .u-1/4 ect.... Additional fractions can be generated from app/sass/tools/utilities/widths.scss, currently using 1 2 3 values.

Create responsive elements using @size on the .u-1/x classes. If you wanted a block to start at full width but switch to 1/2 at a medium screen use u-1/2@medium. You can adjust the generated breakpoints in app/sass/tools/utilities/widths.scss by adding or removing @include widths($widths-fractions, $size-variable-from-config, desired-@-name).

Typescirpt

  • Uses a Typescript module structure. Add Typescript modules via HTML data attributes: data-module="example"
  • All DOM related JavaScript is hooked to js- prefixed classes
  • jQuery is NOT included and should be avoided whenever possible
  • FontAwesome 5 Pro is globally included

Page Transitions

Using fuel-pjax for page transitions and link prefetching Build custom page transitions with the Transition Manager class.

Usage

  1. base.twig includes the basic pjax container/wrapper setup. When a transition is launched the new container is put the pjax wrapper and the old one is removed.
  2. BaseTransition is launched by default. To use a custom transition:
    • Create a new class TestTransition.js which extends BaseTransition
    • Add a line in app/scripts/transitions/transitions.js like export {default as TestTransition} from './TestTransition'
    • Usage: <a href="" data-transition="TestTransition">My Link</a>

Contact

Kyle Andrews
Email
GitHub

Feedback

Feel free to open an issue.

License

MIT