chris-pearce / backpack.css Goto Github PK

https://webkit.org/blog/7929/designing-websites-for-iphone-x.

This'll most likely require a new section unless it goes in resets.css?

This: #27 wasn't done properly, basically it was a bit of rushed job, therefore, it needs more care. This task is about removing it until it can be revisited.

Autoprefixer needs to be part of the build script to ensure backpack.css matches its browser support matrix.

As we're focusing on app styles this rule isn't needed.

https://blog.github.com/2016-02-17-issue-and-pull-request-templates

• Remove all custom properties.

• Ability to turn off all OpenType features?

• Remove 'typography.css' and merge those styles into existing files?

• Add classes for the following OpenType features?

  • fraction
  • footnote
  • small-caps
  • small capitals from capitals

• ::selection property.

• font-display property (see).

• hyphens property.

• object-fit property.

• Responsive type:

  • https://css-tricks.com/font-size-viewport-units

• Implement system-ui (Autoprefixer won't deal with this so we need to provide a fallback font-stack).

  Set the font family of the entire document to use the new 'system-ui' font-family value, -apple-ui is for OS X Firefox support, and finally we fall back to 'sans-serif' for user-agents that don't support 'system-ui'.
  ✌︎ Resources
  https://caniuse.com/#search=system-ui
  https://drafts.csswg.org/css-fonts-4/#system-ui-def
  https://github.com/jonathantneal/system-font-css

• Remove the disclosure widget from the <summary> element (see)

• PostCSS plugins:

  • https://github.com/postcss/postcss-custom-properties
  • https://github.com/postcss/postcss-custom-media

• Look at Bootstrap.

• https://caniuse.com/#search=system-ui
• https://drafts.csswg.org/css-fonts-4/#system-ui-def
• https://github.com/jonathantneal/system-font-css

Need to keep an eye on, see:

• primer/css#408
• sindresorhus/modern-normalize#18

inline-text-semantics.css for some reason isn't imported into index.css 🤷‍♂️.

• OpenType utilities:
  • fraction
  • footnote
  • small-caps
  • small capitals from capitals
• Truncation of long strings

:focus:not(:focus-visible) {
  outline: none;
}

Credit

The :focus:not(:focus-visible) selector allows me to remove the outline in cases where the browser has deemed that the focus does not need to be visible. For browsers that don’t yet support the :focus-visible pseudo-class, the entire rule is ignored and the outline remains as normal.
—https://bitsofco.de/my-css-reset-base/

https://font-display.glitch.me.

https://github.com/h5bp/html5-boilerplate/blob/e1e7277024e7897d4baf06c476ed71acbc59e749/dist/css/main.css#L21-L39

Might need to hold off on this as it appears it causes issues for users on High-Contrast Mode, see here.

Something like:

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

Use lint-staged.

Use stylelint.io and lint-staged.

A Credit section for the README.md:

• https://github.com/sindresorhus/modern-normalize
• https://github.com/csstools/sanitize.css
• https://github.com/necolas/normalize.css
• https://github.com/h5bp/html5-boilerplate

And a blurb on the file structure in src for CONTRIBUTING.md.

This'll override the default "8" which is a bit big. Further details here.

I think it makes sense to limit files that don't fit into MDN's HTML elements reference document sections.

Wanna see and inspect this with examples, maybe related with #24 and #23

Probably should be a new version of CSS Guidelines.

• https://github.com/mozdevs/cssremedy
• https://github.com/h5bp/html5-boilerplate
• https://github.com/sindresorhus/modern-normalize
• https://github.com/csstools/sanitize.css
• https://github.com/visicode/formalize.css
• https://github.com/necolas/normalize.css

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details. This may be too opinionated.

Resources

• https://codepen.io/jdsteinbach/full/GYmQjo/

backpack.min.css

Libs to use:

• postcss-csso

So not doing this:

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

https://github.com/h5bp/html5-boilerplate/blob/e1e7277024e7897d4baf06c476ed71acbc59e749/dist/css/main.css#L54-L67

module.exports all of the lib from a index.js file.

Motivated by this article. If it goes then either set font-family as sans-serif or don't set it at all.

Need to dig into this more (beyond that article).

More insights:

• sindresorhus/modern-normalize#3
• sindresorhus/modern-normalize#18

I'm getting the following console warning:

Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed

It's refering to this line.

I'm on the following version of backpack/postcss:

    "backpack.css": "^1.3.0",
    "postcss-cli": "^6.1.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.5.0",

Look into CircleCI.

As user-agent styles set it to center.

If we're setting a system at the root level (on the html element) then it makes sense to do the same for elements that use a monospace font.

This seems to be the common font stack.

Some packages to look at:

• NP
• semantic-release
• Version Changelog
• Changelog Verify
• Release It!
• Easy Automatic npm Publishes

And Yarn should be mentioned in the docs, not npm.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

https://twitter.com/scottjehl/status/1085600505299111936?s=20

By default button element doesn't get cursor: pointer like a does cause reasons. However, the argument is, seeing that everyone does set cursor: pointer for buttons it's become ubiquitous on the Web.

Inspiration:

• https://github.com/necolas/normalize.css/blob/master/CONTRIBUTING.md

See here:

• https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
• https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none
• https://twitter.com/yatil/status/1083736641737502720

I really don't like this and agree 100% with this tweet. But caring about accessibility I feel my hands are tied.

Here is the related code:

This is already underway (see the tests folder). For now, visual regression testing can be done via the html5-test-page.html file that can be accessed in the browser when running yarn test (http://localhost:3000/html5-test-page.html).