[RFC] Replace CSS Reset to normalize.css in prosilver

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
pawel92
Registered User
Posts: 6
Joined: Sun Mar 30, 2014 1:14 pm

[RFC] Replace CSS Reset to normalize.css in prosilver

Post by pawel92 » Sun Mar 30, 2014 1:37 pm

Hi,

in the file common.css I would like to delete code:

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;
}
and in return for this change, I would suggest adding a normalize.css.

File stylesheet.css would look like this:

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.1.x style)
	Based on style:		
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Group ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css");
@import url("common.css");
...
advantages of the use of this solution.

Regards

pawel92
Registered User
Posts: 6
Joined: Sun Mar 30, 2014 1:14 pm

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by pawel92 » Sun Apr 06, 2014 2:13 pm

hi,
I recently did not give any specific changes only generalities, so I will try to show you how you can effectively apply normalize to the forum without appearance prejudice.

I think that normalize is needed and necessary because every modern skin using it as a base and prosilver as a forefather, protoplast of skins should be done right.

This is what is in the normalize should not be mirrored in the style prosilver, therefore:

1.
common.css in the line 61:

Code: Select all

body {
	margin: 0;
}
should be delete.

2.
All headings should be set margin on each side. So:
common.css in the line 69-70:

Code: Select all

h1 {
	margin-right: 200px;
	margin-top: 15px;
}
should be delete and replace:

Code: Select all

h1 {
	margin: 15px 200px 0 0;
}
common.css in the line 93 and 96:

Code: Select all

h3 {
	margin-bottom: 3px;
	...
	margin-top: 20px;
}
should be delete and replace:

Code: Select all

h3 {
	margin: 20px 0 3px;
}
in the common.css should be add a line (105):

Code: Select all

h4, h5, h6 {
	margin: 0;
}

3.
in the common.css should be delete lines 142-152:

Code: Select all

b, strong {
	font-weight: bold;
}

i, em {
	font-style: italic;
}

u {
	text-decoration: underline;
}
and 111-113:

Code: Select all

img {
	border-width: 0;
}
Now replacements for reset. Necessary due to dilapidation layout.
1.
common.css in the line 60:
should be delete:

Code: Select all

body {
	line-height: normal;
}
and replace to

Code: Select all

body {
	line-height: 1;
}
2.
Minimalist reset, insert before the line 47 common.css.

Code: Select all

dl, dt, dd, form, fieldset, figure, ul, ol, p, pre {
	margin: 0;
	padding: 0;
	border: 0;
}

q {
	quotes: none;
}

q:before, q:after {
	content: '';
	content: none;
}

Useful things better written in css. I'm using boilerplate, teaches good habits.

1.
better written horizontal crossbar.
common.css line 115-123 should be delete, and replace to

Code: Select all

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid transparent;
	margin: 5px 0;
	padding: 0;
	clear: both;
}
My first post is current. You need to remove the reset and insert include normalize.css in stylesheet.css file.

That's all.
I intercede even modified in this way common.css file.
These modifications should not change the layout and position of elements, elements prior to the introduction should be tested. In the end, this is a beta version of phpbb.
However, I tested it for two days and have not found errors.

Please write your suggestions.
Regards.


ps.
boilerplate is useful classes that may be used and combined with those of phpbb. example:

Code: Select all

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by callumacrae » Tue Apr 08, 2014 10:08 pm

You can't just delete a CSS reset and replace it with a normalize! It's a decision you make when you start developing a style, and it's pointless to change once you've finished developing the style. There are no advantages, and you'll probably break something.
Made by developers, for developers!
My blog

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by VSE » Tue Apr 08, 2014 10:29 pm

callumacrae wrote:You can't just delete a CSS reset and replace it with a normalize! It's a decision you make when you start developing a style, and it's pointless to change once you've finished developing the style. There are no advantages, and you'll probably break something.
Agreed!!
Has an irascible disposition.

pawel92
Registered User
Posts: 6
Joined: Sun Mar 30, 2014 1:14 pm

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by pawel92 » Wed Apr 09, 2014 7:42 am

callumacrae wrote:You can't just delete a CSS reset and replace it with a normalize! It's a decision you make when you start developing a style, and it's pointless to change once you've finished developing the style. There are no advantages, and you'll probably break something.
Normalize.css is an alternative to CSS resets. The project is the product of 100’s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.
[http://nicolasgallagher.com/about-normalize-css/]
I would agree with you, if the project was in its infancy, unfinished, but a lot of people are working on the improvement of this and all the time is developed in contrast to the css reset.

And as I wrote earlier on several days of testing I did not notice that something is broke. Check my common.css.

Returning to technical issues not everything is set styling in your browser and reset everything does not make sense.

For me normalize.css is for css like jquery for javascript.
For this project, it also suggests that it is used by bootstrap and modern frameworks.

Is styling phpbb3.1 is really finished? This is only a beta version. It is time for a patch ...

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by callumacrae » Wed Apr 09, 2014 9:20 am

Are there any advantages at all to doing this?
Made by developers, for developers!
My blog

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by PayBas » Wed Apr 09, 2014 9:24 am

callumacrae wrote:Are there any advantages at all to doing this?
Besides the obvious advantages already referred to?

I'm not sure we should switch (although I seriously doubt it will be as much trouble as you suggest, especially given that we are dropping IE6), but to say that there are no advantages at all is a stretch.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by callumacrae » Wed Apr 09, 2014 9:28 am

PayBas wrote:
callumacrae wrote:Are there any advantages at all to doing this?
Besides the obvious advantages already referred to?

I'm not sure we should switch (although I seriously doubt it will be as much trouble as you suggest, especially given that we are dropping IE6), but to say that there are no advantages at all is a stretch.
On an already existing style, I fail to see how any of those advantages are advantages (except for the clutter in devtools, and even that is debatable).
Made by developers, for developers!
My blog

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1731
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by DavidIQ » Wed Apr 09, 2014 11:24 am

pawel92 wrote:Is styling phpbb3.1 is really finished? This is only a beta version. It is time for a patch ...
You can't be serious with this question. Yes of course it's finished. Just take a look at phpbb.com and the fact that there are 3.1 style forums now. The beta stage is meant to polish up the product and fix things that are either broken or were not thought through very well during design. Beta would absolutely not be a stage in which to introduce very large changes. That would have been in Alpha or before and that ship has been long gone now.
Image

User avatar
keith10456
Registered User
Posts: 523
Joined: Sat Apr 22, 2006 10:29 pm
Contact:

Re: [RFC] Replace CSS Reset to normalize.css in prosilver

Post by keith10456 » Wed Apr 09, 2014 4:03 pm

I'm pretty ignorant to css so have patience with me.

Is this something that should/could be considered for 3.2?

Post Reply