To learn HTML and CSS, I started recreating this site

[LB]

I thought you guys might be curious. It's less of a recreation and more of a re-imagining. Mostly faithful, but more to my liking.

As of this post I've only got a mock-up of the forum topic list, but I plan to do the whole site:
http://www.lb-stuff.com/Temp/cpp/forum/general/
It only renders properly in Chrome currently; I plan to run the CSS through a post-processor to add the correct vendor prefixes so it renders properly in other browsers too. For reference, it should look like this:
https://i.imgur.com/mZ0yrK9.png
Also, if you make the viewport less than 800px wide, it switches to mobile view. If you hate resizing your browser window, you can zoom in or just resize it in the fiddle:
https://jsfiddle.net/LB__/w37ssqoq/28/ ^{(yes, that is the 28th revision - I've been working on this for weeks)}

Some finer details to note:
- There is no JavaScript. I'm intentionally trying to avoid it as much as possible.
- When the topic OP or last reply is more than two lines, only 1.5 lines are displayed. The OP second line has a fade over it so that it looks nice when it clashes with the last reply.
- When the topic title or name of the post author is to long, it gets cut off and replaced with an ellipsis.
- The left sidebar width is determined by its content, so it is only as wide as it has to be.
- The right sidebar is ad space, and is not visible in mobile mode.
- There are currently no images or graphics being used (because I'm too lazy to deal with them)
- A lot of other minor things that I spent hours researching how to do, only to result in a few pixels of perfection.

I've really enjoyed this so far, and have learned so much about HTML and CSS. At this point though I'd like feedback before I do the other parts of the site - what do you want changed? What do you love/hate about the current cplusplus.com? Who knows, maybe someday in the far future it will be the new version of cplusplus.com.

[giblit]

Logged in as Disch, interesting.

[LB]

I don't remember why.

[2LzbRXSz]

Haha I noticed that too.

[ne555]

> only 1.5 lines are displayed
I hate that, half line is just noise.

> The left sidebar width is determined by its content, so it is only as wide as it has to be
good, but make it a little wider (1ex margins, by instance) it would look better.


About resizing. I tend to view fullscreen or split vertically. What I dislike from sites like wikipedia is that the text adjust to the new size, but the side bar is still there eating useful space.
In this page the text width is fixed and can simply use the horizontal scroll to view it fine (however is a little too wide).


Tested your site with links.
The links for the pages in the thread and the forum (1,2,3,4,...) appear vertical instead of horizontal.
the difference being in that you use the <li> tag

[LB]

ne555 wrote:

I hate that, half line is just noise.

It is still readable, though - I found that useful compared to what cplusplus.com currently does. The current summaries are too short to be useful.

ne555 wrote:

good, but make it a little wider (1ex margins, by instance) it would look better.

I'm not really sure what you mean here. 1ex is pretty small difference, is that really all?

ne555 wrote:

About resizing. I tend to view fullscreen or split vertically. What I dislike from sites like wikipedia is that the text adjust to the new size, but the side bar is still there eating useful space.
In this page the text width is fixed and can simply use the horizontal scroll to view it fine (however is a little too wide).

I don't know what you mean by the text width being fixed - fixed as in not broken, or fixed as in immovable?

ne555 wrote:

Tested your site with links.
The links for the pages in the thread and the forum (1,2,3,4,...) appear vertical instead of horizontal.
the difference being in that you use the <li> tag

What do you mean "with links"? As for the vertical links, that happens if the styles aren't supported - like said this is currently pure CSS and I plan to use a post-processor to make it compatible with other browsers. I use the ul/li tags because those are what unordered lists are for, it is the correct markup to use in that case based on my research.

[ne555]

> It is still readable, though
For you, native english speaker, perhaps. I have to do more effort than I'm willing to.


> The current summaries are too short to be useful
perhaps


> I don't know what you mean by the text width being fixed
immovable.
it was more a rant about useless side bars eating useful space.
seldom need them, just for changing the forum, and that's unlikely to happen in the middle of a thread.


> that happens if the styles aren't supported
ok, you were aware of it.
links is a web browser http://linux.die.net/man/1/links

[Cheraphy]

Didn't realize 'links' existed. I only knew of 'lynx'

[S G H]

My reply is short.

[Cheraphy]

Mine is shorter.

[LB]

ne555 wrote:

For you, native english speaker, perhaps. I have to do more effort than I'm willing to.

What if I made it 1 line by default and 2 lines on hover? (I would do some magic to make sure the rest of the forum topics didn't jump up and down)

ne555 wrote:

it was more a rant about useless side bars eating useful space.
seldom need them, just for changing the forum, and that's unlikely to happen in the middle of a thread.

That's a good point. I think I might be able to make the sidebar collapsed unless you hover over it - do you think that's a good idea? Again, I'd do some magic so the rest of the content doesn't reflow. Not sure what to do about the advertisement though, aside from getting rid of it.

ne555 wrote:

links is a web browser http://linux.die.net/man/1/links

Do you know what vendor prefix it uses? http://stackoverflow.com/a/5411098/1959975 if it isn't common, the post-processor might not know about it, meaning I'd have to add the prefixes manually.

[ne555]

¿this? http://stackoverflow.com/questions/20571179/display-html-element-only-in-text-browsers

[LB]

I'm having a hard time finding information for links - the official website is less than helpful, boasting support for HTML4 (without CSS). For reference, I'm writing in HTML5 and CSS3. I don't think it is worth the effort to try and support a browser I can't even use. I am going to be following Google's guidelines - only supporting the last two versions of all the major browsers:
https://support.google.com/a/answer/33864

I do check how the page looks without CSS, and I know what you're talking about with the page numbers. I could wrap the page numbers in different tags instead of ul/li, but this goes against several web design philosophies. For example, wrapping the page numbers in ul/li helps screen readers understand that it is a list, and it allows the user to easily skip the list without skipping anything else. Screen readers are not uncommon; many sites try to support them and HTML/CSS are being designed with them in mind.

I could, however, make an alternate version for text browsers like links, rather than trying to do everything in the same page. But most websites don't do this (to my knowledge).

[S G H]

Isn't Links a Lynx derivate?
Also I agree: Lynx/Links support is useless. I switch to Chrome for cplusplus.com: it doesnt work on Lynx anyways.

[htirwin]

Nice work.

There is no JavaScript. I'm intentionally trying to avoid it as much as possible.

This is what is typically recommended, but I personally prefer to limit CSS to the basic stuff and use Javascript/jquery for all of the dynamic and responsive elements. I can just create much better UI's that way and it's much less finicky and easier to make work on all browsers. Besides, some things you just can't do well with CSS. Also it's easier and simpler to implement. The behavior is mostly logic based. I also set everything to absolute positioning.

Some tricks I like to use in UI design for web applications. Use lighter borders for top and left and darker for bottom and right, gives a somewhat 3D looking effect. For some elements I like to use inset box shadow, or outset box shadow again for 3D effects.

For toggles, you can just use regular div elements, and use inset box shadow for selected, and outset for non-selected. You can leave the background transparent. Makes for a good 3D effect and looks very clean.

       // not pressed
        $('#somebutton1' ).css({ 
            "background-color"      : "rgba(0,0,0,0)",
            "border-left-width"     : "0px",
            "border-top-width"      : "0px",
            "border-right-width"    : "1px",
            "border-bottom-width"   : "1px",
            "box-shadow"            : "2px 0px 4px 0px rgba(0,0,0,0.75)"
        } ); 

        // pressed
        $('#somebutton1' ).css({ 
            "background-color"      : "white",            
            "border-left-width"     : "1px",
            "border-top-width"      : "1px",
            "border-right-width"    : "0px",
            "border-bottom-width"   : "0px",
            "box-shadow"            : "inset 1px 4px 9px -6px, inset 0px 1px 9px -6px"
        } ); 

[LB]

htirwin wrote:

I also set everything to absolute positioning.

You're kidding, right?

htirwin wrote:

Use lighter borders for top and left and darker for bottom and right, gives a somewhat 3D looking effect. For some elements I like to use inset box shadow, or outset box shadow again for 3D effects.

That's exactly what this site does, and that's how I am recreating the effects in CSS. Box shadow is really awesome because it supports multiple values - something I wish other properties supported

Also, I'm pretty sure you're not supposed to write the CSS in the JavaScript like that - it's better to create CSS classes and just have the JavaScript change which class is on an element.

[htirwin]

You're kidding, right?

No. It's much easier to be ultra precise with your layout and responsive design this way. Trying to use CSS for all that stuff just ends up limiting you and eating up your time trying to get it to do what you want.

Here is a shot of the application I have been working on that shows what I am talking about with the box shadow thing.

http://tinypic.com/r/24zku3s/8

[LB]

http://stackoverflow.com/q/2275084/1959975
http://demosthenes.info/blog/135/CSS-Positioning-absolute-the-overused
http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

Absolute positioning should not be used for everything, or even most things. It's horrible practice. The current standard is responsive design, where the web page fluxes to support the size of the viewport, even in real time. I do use absolute positioning sometimes, but only when I make a known parent container position: relative; so that I'm not using the body's coordinates.

I can't view the image, but I'm not sure why you posted it to begin with - we both agree that box-shadow is awesome.

[htirwin]

Absolute positioning should not be used for everything, or even most things. It's horrible practice. The current standard is responsive design, where the web page fluxes to support the size of the viewport, even in real time. I do use absolute positioning sometimes, but only when I make a known parent container position: relative; so that I'm not using the body's coordinates.

I use absolute positioning in order to achieve better responsive design. I catch the resize event and modify sizes and positions accordingly.

[LB]

That's what the browser is supposed to do, though.