DEV Community

Discussion on: What are some examples of open-source projects with great READMEs?

View post
Collapse
 
ijlee2 profile image
Isaac Lee • • Edited

Hi, there! 👋

I created ember-container-query and am happy with how its README turned out. I like it for these reasons:

  • Continuous integration badges to deliver confidence
  • Quick demo GIF
  • 1-line installation
  • List of practical applications
  • <summary> tags to hide details and not overwhelm first-time visitors

GitHub logo ijlee2 / ember-container-query

Make container queries that harness the power of Ember Octane.

This project uses GitHub Actions for continuous integration. This project is using Percy.io for visual regression testing.

ember-container-query

Make container queries that harness the power of Ember Octane.

Demo of ember-container-query

Open the demo app to see ember-container-query in action. (There's even a 404 page!)

Installation

ember install ember-container-query
Use FastBoot? ⚠️

This addon uses nullish coalescing operator ??. If you use FastBoot (with Node < v14.0) and only support browsers that natively support ??, you will run into a build error:

/var/folders/2z/93zyyhx13rs879qr8rzyxrb40000gn/T/broccoli-689520dxo26a682Mz/out-529-broccoli_merge_trees/assets/vendor.js:121232
  return this.args.features ?? {};
                             ^
SyntaxError: Unexpected token '?'

To prevent this, please make sure to add node: 'current' to your config/targets.js file.

'use strict';
const browsers = [ ... ];
module.exports = {
  browsers,
  node: 'current'
};

Applications

Where can you use container queries? Here are real-life (and some theoretical) applications!

Create reusable components that are independent of screen size ♻️

  1. Components form a core of an Ember app. We love components!

  2. With…

View on GitHub