Simplify templates in v2

[sgomes]

Our current templates have a lot of extra styles, which raises the barrier to entry for developers, requiring a lot of webdev knowledge to tinker with.

We should simplify our templates in v2, moving things to the library where possible, as well as potentially removing some eye-candy in favour of simpler CSS.

Having a very simple template with no added CSS would also help.

[addyosmani]

Do you require designer input on how we can simplify these layouts? Just how bad are they if we entirely drop the extra CSS as is right now?

[sgomes]

We might need designer input, yes. I think a good approach would be to cut as much as possible, see where that gets us, and run the result by a designer for advice.

Removing the whole thing would likely result in some significant ugliness, as the templates weren't developed with a "progressive enhancement" mindset in terms of the extra CSS added; they were developed to match the design mockups as close as possible from the beginning.

[joseaio]

Please, remove all the html/css boilerplate:

And allows very simple html, some examples:

Input:
<label title="Title"><input name="description" type="text" value="..."/></label>

Date:
<label title="Birthdate"><input name="birthdateame" type="date"/></label>

Checkboxes & Radios:
<label title="Choose Color">
<label title="Red"><input name="color" type="checkbox/radio" value="#F00"/></label>
<label title="Blue"><input name="color" type="checkbox/radio" value="#0F0"/></label>
<label title="Green"><input name="color" type="checkbox/radio" value="#00F"/></label>
</label>

(*) you can show labels with css: label:before { content: attr(title) }

[jakub-swierk]

@joseaio IMHO

CSS generated content do not work well with some screen readers: reference.

About Checkboxes & Radios proposition.... It's not valid for label to have other label element as descendant: reference.

[joseaio]

Thanks Jakub for your links,

Over the years I see an increase of boilerplate on HTML spec

For readers you can use the "aria-label" (because "title" on inputs is not well recognized as input label):

  `<label title="Title"><input name="description" type="text" value="..." aria-label="Title"/></label>`

I test nested labels on chrome and firefox and works fine (another approach can be fieldset)

<fieldset title="Choose Color">
<label title="Red"><input name="color" type="radio" value="#F00" aria-label="Red"/></label>
<label title="Blue"><input name="color" type="radio" value="#0F0" aria-label="Blue"/></label>
<label title="Green"><input name="color" type="radio" value="#00F" aria-label="Green"/></label>
</fieldset>

Of course <label> it's also boilerplate, the next input has all semantic:

<input name="description" type="text" value="..." title/aria-label="My Label"/>

(*) but there isn't selector on CSS to extract attributes of input as:

   input:pre { content: attr(title/aria-label)  }    <= :before and :after "not works" for inputs...

[Garbee]

The goal isn't to directly trim down the HTML to build the templates. It is to remove the extra styling done for the templates so what you see is more directly what is provided. People often get confused on what exactly can be done "out of the box" compared to what they need to code themselves when they start by looking at the templates.

In the end, the amount of HTML written isn't an issue and the "boilerplate" extras all exist for a reason. While we do want to be as dynamic as we can with what authors can write we also need to make sure what is provided is easily maintainable in the future and doesn't create overly-complex (and unnecessary for the majority of users) code to achieve Material Design results.