h5bp / main.css Goto Github PK

I think we should add a stylelint config. The stylelint-config-recommended and stylelint-config-standard is a good one as it has rules to enforce the common stylistic conventions found within a handful of popular CSS styleguides, including: The Idiomatic CSS Principles,
Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

REF:

• https://github.com/stylelint/stylelint-config-recommended
• https://github.com/stylelint/stylelint-config-standard

The default branch name for new repos in GitHub is now main. Many companies and major open source projects like Microsoft, IBM, Twitter, Red Hat, MySQL, the Linux kernel, and OpenBSD have changed their default branch to main.

I think it'd be good to change our default branch to main too.

It's a particularly fitting name for this repo. :-)

It's easy to do and only takes a few minutes.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

In version 8 of HTML5Boilerplate, the print styles are inlined using @media print with this comment above:

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

The article, from 2007, does not seem relevant anymore. Many CSS developers are taking advantage of the fact that print-media stylesheets are now loaded asynchronously. (I don't find any specification for this, but it seems to be common practice now, and I see a reference to the async nature of print style sheets at https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS)

So … I think it might be a good idea to separate out the print CSS into a separate file, loaded separately and asynchronously, to allow the main.css file to be a bit smaller, which speeds up initial page load.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Running default gulp task reports the following warning:

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

It'd be neat to add a GitHub Action Lint workflow. I think we could use Super Linter (https://github.com/github/super-linter), maybe with the following config to start with.

name: Lint Code Base

on:
  push:
    branches: [main]

jobs:
  build:
    name: Lint Code Base
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Lint Code Base
        uses: docker://github/super-linter:v3
        env:
          DEFAULT_BRANCH: main
          VALIDATE_ALL_CODEBASE: false
          VALIDATE_EDITORCONFIG: false
          VALIDATE_MARKDOWN: false
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Something broke!

I need to fix it!

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

The actual ESLint configuration seems to be de-synchronized with the actual sources of the repository.

Here is a list of small details reported:

• ESLint isn't installed as a devDependencies.
• The mocha plugin is required but it's not used.
• No entry in the script section that refer to the ESLint CLI.

Proposal:

• Install all missing devDependencies.
• Keep the bare minimum as an ESLint configuration.
• Add script entry that runs ESLint.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Notes:

I think it might make sense to add an .npmignore to the repo and exclude the files which aren't needed for users who are pulling main.css to their projects via npm/yarn. It's not a big deal really, but there's no need for the .github directory and all those various configs. Will reduce number of files when importing.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

It'd be good if the Gulp build script automatically checked and either fix or report/warn of any Stylelint issues.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Steps to reproduce

1. Visit https://codepen.io/joe-watkins/pen/OjpqxL with Safari or Chrome and VoiceOver activated.
2. Tab to each link and listen to how they are announced.

Expected Results

The visually hidden text using HTML5 boilerplate's .visuallyhidden {} will be announced in the order that it is within the markup.

Actual Results

The order of the text is not announced does not match the markup order. Visually hidden text is announced before visible text copy.

Potential fix

After some testing, I've found that using position: relative; and display: inline-block; appears to solve this. e.g.

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: relative; // different - for reading order in macOS VO
	display: inline-block; // new - for reading order in macOS VO
}

SR Tested (works in)

• Win Edge,IE11,FF,Chrome JAWS 18/17
• Win IE11,FF,Chrome NVDA
• macOS Seirra Safari,Chrome,FF VoiceOver

Browsers tested (works - hides text in)

• Win Edge, IE11, IE10, IE9, IE8, FF 53, Chrome 60
• macOS Seirra Safari 10.2, Chrome 60, FF 54

Video screencast of experience

I'd love to get some thoughts on this and I'd be happy to create a PR if everyone is into it :)

This issue is to track progress of releasing the first update to main.css! 🚢

Release Notes

• Add .stylelintrc config (#18)
• Rename visuallyhidden to sr-only (#27)
• Fix broken link to 'printing tables' page (#20)
• Alphabetize properties (#20)
• Add stylelint-config-recommended to package.json
• Add CONTRIBUTORS.md(#9)
• Minor devdeps and README updates (#11), (#24)

Todo List

• Deal with currently open PRs
• Update CHANGELOG.md
• Publish v2.0.0 on GitHub (@roblarsen)
• Publish v2.0.0 on NPM (@roblarsen)

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Bug reports

I'm not able to access to the article by using this URL: http://css-discuss.incutio.com/wiki/Printing_Tables

My proposal is to replace it by an article from the Smashing Magazine:

• Designing For Print With CSS: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks

I will linked to this issue the corresponding pull request. Hope it helps you. Thanks

As above. Use GitHub actions to ensure that the latest is built to dist on commits to master.

The GitHub Actions workflows use a bunch of different Node versions from v14 to v18. We should probably standardise them on Node v18 which is the current/active version.
REF: https://github.com/nodejs/release#release-schedule

I think it'd be good to add a CHANGELOG so folks who have downloaded the repo can see what has changed between versions, especially if there have been class name changes etc.

I think we should either add a CHANGELOG.md to the root of the project repo and list everything there like we do for HTML5 Boilerplate - or if not (to reduce duplication/effort) we could have an almost empty CHANGELOG.md with just include a link to the releases page on GitHub (https://github.com/h5bp/main.css/releases) which is less useful but better than nothing at all.

see #15 (which may close this)

The options are alphabetical or by type? Is there some other option that people use?

• Tally up all the contributors
• Add a contibutors.md file, listing all the original contributors (I will work with whoever picks this up to craft the language in the file.)
• 🚀

19 for this version
and...
9 here
and...
19 here

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

We currently specify supported browsers with a browserslist config in the package.json. I think it makes more sense to remove this so it simply uses the Browserslist defaults which is similar to ours anyway.
https://browsersl.ist/#q=defaults

The defaults query is a shortcut for > 0.5%, last 2 versions, Firefox ESR, not dead. It matches recent versions of popular and supported browsers worldwide and includes Firefox Extended Support Release which is updated roughly annually.

The current sr-only utility class uses position: absolute with no coordinates as the main method to remove and stop element from affecting layout.

This doesn't play well with some scrolling setups combined with browsers new "feature" of scrolling to elements it thinks user is interacting with.

The problem is isolated and explained here (affects Chrome): https://output.jsbin.com/tamuvac

The fix would be to instead use:

position: fixed;
left: 0;
top: 0;

Yay

I'd like to propose that we rename the visuallyhidden class to sr-only.

• visuallyhidden isn't super clear exactly what it is for. The class is intended to be used for text which is only for screen readers so I think sr-only is more obvious and makes more sense
• The sr-only class is used by Bootstrap, the world's most popular CSS framework. It's sort of good to align with that.
• visuallyhidden isn't a word and is always flagged as a typo which bugs me :-)

Caused by del v7.0.0.
https://github.com/sindresorhus/del/releases

I'll open a PR to revert to previous version which works.

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

1. Run npm run lint:js
2. Error:

 0:0  error  Parsing error: require() of ES Module C:\....\main.css\node_modules\eslint-scope\lib\definition.js from C:\....\main.css\node_modules\babel-eslint\lib\require-from-eslint.js not supported.
Instead change the require of definition.js in C:\....\main.css\node_modules\babel-eslint\lib\require-from-eslint.js 
to a dynamic import() which is available in all CommonJS modules

✖ 1 problem (1 error, 0 warnings)

(node:14380) [ESLINT_PERSONAL_CONFIG_SUPPRESS] DeprecationWarning: '~/.eslintrc.*' config files have been deprecated. Please remove it or add 
'root:true' to the config files in your projects in order to avoid loading '~/.eslintrc.*' accidentally. (found in "..\..\..\.eslintrc")      
(Use `node --trace-deprecation ...` to show where the warning was created)

See the @NickColley comment on #27 rename visuallyhidden to sr-only by coliff · Pull Request #27 · h5bp/main.css

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

clip: rect(0 0 0 0);
must be clip: rect(0, 0, 0, 0);
Because missing coma broke css validation in w3

This Issue is to track progress of releasing main.css v2.1.0 🚢

Release Notes

• Updates to stylelint-config-standard and add lint script (#55 )
• Add .npmignore (#54 )
• Add [hidden] attribute support (#53 )
• Update _print.css (#52 )
• Remove .browserupgrade class (#51 )
• Update Supported browsers (#58 )

Todo List

• Update CHANGELOG.md
• Publish v2.1.0 on GitHub (@roblarsen )
• Publish v2.1.0 on NPM (@roblarsen )

Okay! Months later I return from the wilderness.

This issue was originally about pre-processors and all that and after kicking the tires on it, it seems like a waste of time, so this is now simpler.

1. Break main.css into muliple files
2. combine them back together to create voltron the new main.css
3. copy the component files to ./dist/ so that people can ingest individual files as needed

This will be the 1.0.0 release 🥇

The build script here is using Gulp 3.9.1. It'd be good to get this updated to Gulp 4.x. Many gulp plugins require Gulp 4.x now.

I think we should modify the browserslist supported browsers to be:

0.5%, last 2 versions, Firefox ESR, not dead, IE11.

These are the browerlists defaults(https://github.com/browserslist/browserslist#queries) and includes a better range of defaults - but with the addition of specifying IE11.

The best practises section is a good reference: https://github.com/browserslist/browserslist#best-practices

Note: Also need to update the list at: https://github.com/h5bp/main.css/blob/master/README.md#browser-support

This Issue is to track progress of releasing main.css v3.0.0 🚢

Release Notes

• Rename sr-only' class to visually-hidden` #109 (this is a breaking change so that's why version is bumped to v3)
• Remove print thead rule #101
• Remove Vendor-prefixed ::selection #93
• Lots of dev dependency and npm publishing updates

Todo List

• Change 'master' to 'main' as default branch name (@roblarsen)
• Update CHANGELOG.md (@coliff)
• Publish update GitHub/npm (@roblarsen)

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

hey @roblarsen - when I make a build the indenting of the CSS in the dist dir is different (it's better and more consistent). I'll make a PR for this as assume it was previously unintended.

I'm submitting a ...

• bug report
• feature request
• other

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Notes:

We should remove IE 11 from the browserlist config field in package.json now that it is no longer supported by H5BP.