Non-semantic layout

[hgenru]

I am a little confused layout and styling in template.

1. Why toggle-all is in main section, but visually is in header? What prevents to place it there?
2. Found <label for="toggle-all">, but input with specific name not found. And in css label display: none. Wtf?
3. toggle-all checkbox styled with ::before pseudo class, but input elements has no content and this is hack.
4. In todomvc-app-css specify :focus {outline: none}. That's too bad, because it disables native tab button behavior.

todomvc-app-template and todomvc-app-css need some refactoring. I ready to help.

[sindresorhus]

1. Legacy reasons. We didn't have the resources to change the HTML of a gadzillion example apps, so we chose to just do a CSS hack.
2. Probably a mistake from when we converted all ID's to classes. Should be fixed. It's hidden because it's up to the JS framework to show it when it's actually needed (when at least one task is done).
3. Same as 1.
4. Any other way to disable the ugly focus ring?

That being said, happy to have the help fixing this. We version the CSS, so we can just do a new major version with breaking changes.

[hgenru]

Thank you for such a speedy response!

Do not know about others, but I love focus ring! At least without them to manage the application from the keyboard is impossible.

The current template does not support mobile devices. Maybe create new template in view of these problems? Is needed changes in the infrastructure in this case?

[sindresorhus]

The current template does not support mobile devices. Maybe create new template in view of these problems? Is needed changes in the infrastructure in this case?

We're not interested in creating something new, but we do want to adopt the existing HTML and CSS to be mobile friendly.