Eustace

Start from scratch without reinventing the wheel

This starter package leverages a front end boilerplate, kitchen sink, and some sensible styling defaults to avoid typing the same things for each project.

The goal is for every project to possess the following qualities:

• Accessible: Content is accessible to everyone, regardless of ableness
• Client-agnostic: Content is accessible on every device, operating system, browser or non-browser client (i.e. RSS reader, "Read Only" mode, etc.)
• Connection-agnostic: Content is accessible while offline, once cached
• Content-agnostic: Markup, styles, and scripts work with all types of content
• Device-agnostic: Content is not styled or optimized for certain devices, but rather styled and optimized for any device
• Flexible
• Inclusive
• JavaScript-agnostic: Content and functionality are accessible without JavaScript
• Mobile-first: Design for mobile, enhance for larger screens
• Performant: Content loads in under 2000ms
• Progressively-Enhanced: Enhance markup and styling in browsers and environments supporting modern layout methods and JavaScript features, instead of breaking layouts and features in non-supporting environments
• Responsive: Look good on all devices and screen sizes
• Secure
• Simple: Reduce complexity wherever possible
• Style-agnostic: Content and functionality are accessible without CSS; source order always makes sense
• Zero Dependencies: Get up and running without any build tools, pre-processors, or 3rd-party scripts

Lighthouse Audits

• Performance: 100%
• Progressive Web App: 100%
• Accessibility: 100%
• Best Practices: 100%
• SEO: 100%

Features

• Accessible Patterns
  • Mobile navigation
  • Skip navigation link
  • Pagination
• Inclusive Components
  • Cards
• Accessibility First form elements
  • Toggle Switch
  • Text Input (coming soon)
  • Radio Buttons (coming soon)
• Components
  • Accordion
  • Avatar
  • Blockquote
  • Breadcrumb
  • Code
  • Table
• Templates
  • Archive
  • Article
  • Boilerplate
  • Form

Roadmap

• Add Components
  • Image Lightbox, if this makes any sense in 2019
• Add Templates
  • Archive Types
    • Author
    • Category
    • Date
  • Media Gallery
  • Portfolio
  • Project
  • Product
  • Video
• Style elements
  • Responsive tables
  • Form elements
  • button_cta shadow
  • Accessible colors
• Add Inclusive Components
  • Data Tables
  • Notifications
  • A Content Slider
  • Collapsible Sections
  • Tabbed Interfaces
  • A Theme Switcher
  • Tooltips & Toggletips
  • Menus & Menu Buttons
  • A Todo List
  • Toggle Buttons
• Incorporate a11y_styled_form_controls if it makes sense

Quick Start

Download or clone this repo into a folder (i.e. Hello-World) and open index.html.

$ git clone https://github.com/paulshryock/Eustace Hello-World
$ cd Hello-World
$ open index.html

Contributing

If you'd like to contribute, please read the Code of Conduct, then fork the repository and use a feature branch. Pull requests are welcome.

Your First Contribution

Working on your first Pull Request? You can learn how from this free series, How to Contribute to an Open Source Project on GitHub.

Contributors

Name	Role
Paul Shryock	Owner

Thanks

Thanks to these individuals and groups for releasing high-quality open-source resources, many of which have been incorporated into this project.

Name	Resource
Ahmad Shadeed	a11ymatters
Andrew Bone	Accessibility first toggle switches, Accessibility first radio buttons, Accessibility first text input
Eric Rasch	HTML Kitchen Sink
Heydon Pickering	Inclusive Components
Jeremy Thomas	minireset.css
Josh Buchea	HEAD
Juanjo Bernabeu	humans.txt
Khan Academy	tota11y
Kinyanjui Wangonya	Better console.logs
Nathan Swartz	Form Ipsum
Nicolas Gallagher	Normalize.css
Sarah Cope	quotes
Tim Brown	Flexible Typesetting
The Web Robot Pages	robots.txt

Links

• Project homepage: https://paulshryock.github.io/Eustace/
• Repository: https://github.com/paulshryock/Eustace
• Releases:
  • v1.0.0 - Initial release
    • v1.1.0 - Accordion, Blockquote, Cards, Code
    • v1.2.0 - button_cta, Screenshot, Templates, Boilerplate
    • v1.3.0 - Forms, Lists, Pre, Scrolling
    • v1.4.0 - Table, Colors, README
  • v2.0.0 - Rename project
    • v2.1.0 - Hamburger Menu Icon
    • v2.2.0 - Avatar, Typography
    • v2.3.0 - Breadcrumb, Toggle
    • v2.4.0 - Service Worker
    • v2.5.0 - Render-Blocking Resources
• Issue tracker: https://github.com/paulshryock/Eustace/issues
  • In case of sensitive bugs like security vulnerabilities, please contact paul@pshry.com directly instead of using issue tracker. We value your effort to improve the security and privacy of this project!
• Related projects:
  • Project Roadmap: https://github.com/paulshryock/Project-Roadmap - Plan and execute digital projects from scratch without reinventing the wheel
  • Leigh: https://github.com/paulshryock/Leigh - Start local development from scratch without reinventing the wheel
  • Myrtle: https://github.com/paulshryock/Myrtle - Start Cockpit from scratch without reinventing the wheel
  • Brimbly: https://github.com/paulshryock/Brimbly - Start WordPress from scratch without reinventing the wheel

Licensing

The code in this project is licensed under GNU General Public License v3.0.