Papertrain is a Craft 3 Framework for a Modern Webpack Development Setup
Switch branches/tags
Nothing to show
Clone or download
Latest commit e7479ec Dec 8, 2018
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-08.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