[Define New Theme] 1. Should we adopt Normalize/SUIT base for a new theme

[hanakin]

• a base font size and color on the HTML element

For some elements, yes, it makes a lot of sense to do that. But not on all elements... I still wonder if it's just a designer's pickyness or if it is ligit.

This statement makes absolutely no sense?

Code: Select all

html {
  background: inherit;
  color: inherit;
  font: 16px sans-serif;
}

This is all that base does to address this which is done anyway if inheritance is our goal

• removes default margins from elements since it makes more sense and is safer to explicitly set all margins for everything that requires them via wrapping elements.

That makes sense. Still, it's just a single "*{margin:0;padding:0}", though.

makes absolute sense but you are wrong to want anything that game changing to be set on the wildcard. That is extremely slow to render and causes more code changes then necessary in the end. Also who said anything about paddings? paddings are not treated the same as margins as we would be using box-sizing which means paddings are internalized and do not affect layout.

Code: Select all

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

this is all that base affects and this list was carefully chosen based on lots of analysis based what we commonly zero natively with no reset.

• removes a few annoyances with browsers like default outlines on fieldsets and focused items

I wouldn't do that to all. I'd just make it element-by-element.

Again what are you talking about it is element by element

Code: Select all

button {
  background: transparent;
  border: 0;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

that is all the code in SUIT base.css!

it is a focused element by element approach to neutrality in browsers based on commonality it design

[brunoais]

• a base font size and color on the HTML element

For some elements, yes, it makes a lot of sense to do that. But not on all elements... I still wonder if it's just a designer's pickyness or if it is ligit.

This statement makes absolutely no sense?

Code: Select all

html {
  background: inherit;
  color: inherit;
  font: 16px sans-serif;
}

This is all that base does to address this which is done anyway if inheritance is our goal

That depends on the actual thing. For something like phpBB I'm skeptical about it.
For some parts of the page, I think that it makes a lot of sense to do stuff like that but not all of it like that (font is inherited by default). I don't get about:

Code: Select all

  background: inherit;
  color: inherit;

, though.

• removes default margins from elements since it makes more sense and is safer to explicitly set all margins for everything that requires them via wrapping elements.

That makes sense. Still, it's just a single "*{margin:0;padding:0}", though.

makes absolute sense but you are wrong to want anything that game changing to be set on the wildcard. That is extremely slow to render and causes more code changes then necessary in the end. Also who said anything about paddings? paddings are not treated the same as margins as we would be using box-sizing which means paddings are internalized and do not affect layout.

Code: Select all

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

this is all that base affects and this list was carefully chosen based on lots of analysis based what we commonly zero natively with no reset.

Yeah, you make sense. I still think that the h* margins and the <p> margins can just be trusted to the browser's defaults. For example, in what I do, I trust the browser that is knows best on how information should be displayed to the user in multiple situations but sometimes I have to take over due to space constraints and whatnot.
Still, there will be specific elements that will require margins outside the defaults for some reason, for those, just place it yourself.

• removes a few annoyances with browsers like default outlines on fieldsets and focused items

I wouldn't do that to all. I'd just make it element-by-element.

Again what are you talking about it is element by element

Code: Select all

button {
  background: transparent;
  border: 0;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

that is all the code in SUIT base.css!

it is a focused element by element approach to neutrality in browsers based on commonality it design

Ups. Sounds like I didn't explain myself well enough.
I didn't mean as element selectors. I mean the actual case-by-case scenario.
I'd keep that last one, though. It makes sense as a reset.

[hanakin]

the inherit for bg and color are the defaults but they are set by a css variable we would set that to what we need for phpbbso something along the lines of #fff for bg and #333 for color.

As for the h*, p you are either completely crazy or confused about how a reset/base works. The there will be a redeveloped type layer applied after this that would re-establish the spacing for h* and p along with all the other type elements to add here to a consistent baseline grid.

The last part is undoing the changes to those elements that are set in normalize as with some elements inorder to normalize them you need to implicitly set them to something that you can control and then unset them.

Code: Select all

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

just an example

keep in mind I am not saying to use base as is just use it as a starting point. I would actually not zero anything on the fieldset other than the border.

[brunoais]

Hum... In that case why is the current phpBB's "normalize" wrong (or potentially wrong)?

[hanakin]

current reset....

Code: Select all

/* CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
---------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

firstly its dated and not actively updated.

Second it should be its own separate module in phpbb that can be swapped out when a new version is considered

lastly Its does not normalize anything. It just zeros out padding, margins and borders which is potentially problematic and affects too many selectors and does nothing to address the inconsistencies outside of those specific properties.

Further more the few changes that it does make are not well documented.

[brunoais]

Yeah... I'm not really keen about the current one. Same for the seemingly random single stylesheet with multiple imports for each other's stylesheet.

[Senky]

Working with normalize.css on more than 10 projects, SUIT base looks like pretty good improvement. I would definitely go with the SUIT base - it covers all common problems front end developers deal with when using just normalize.css!

[hanakin]

Merged https://github.com/phpbb/phpbb/pull/3840