sleekyom/emmanuelkolawole

msg-starter

A static site starter kit.

• MSG to generate markup in a really really flexible and simple way.
• Rollup and Babel to bundle the JS in a concise and performant manner.
• postcss to transpile super modern atomic (tachyon like) styles into cross-browser & mobile friendly CSS.

Dev reccomendations

• Install Prettier for your editor and set it up to format on save. It will also run when you commit, but it's a more enjoyable / less discombobulating experience to run on save.
• Install ESLint for your editor. It hookes into the rules set for prettier, so not completely neccesarry but it sets up a more polished place for you to work in, lovely!

TODOs

• pa11y testing: follow links / take an array generated by another tool / test against local files
• https://github.com/markedjs/marked markdown!
• snapshot testing (https://www.cypress.io/ ?)
• commit message linting
• performance testing with pupateer, coverage budget, size budget
• CI of some kind testing
• Look into prepack for improving js performance
• https://codellama.io/ automated code review!?
• container queries
• boxy svg note this down somewhere for when I'm looking for icons
• csp! write up details on this and set up a basic implementation

Components

Rough outlines for common UI component design patterns.

Navigation

• Horizontal Scrolling Nav
• Stacking to horizontal
• Priority Plus

Forms

• Input with icon

Revelations

• Popin (slides in from the edge of a container, absolute position)
• Popout (slides out from the edge of a container, absolute position)
• Modal (Sides over the top of a container, absolute position)
• Drawer (expands from the edge of a container, static position This will cause excessive repainting, use sparingly)

Layouts

• Breakpoint columns
• Grids