Lorne's "Let's Make This UI Less Shit" stylesheet thread

Lorne Kates

NEEDED: Borders around some fucking shit. I'm goddamn tired of inputs with no borders, so it just looks like floating text. Fuck you. Input widgets have borders for a fucking reason.

Edit to this shit as I make them.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("what.thedailywtf.com") {

blockquote
{
 background-color:#F6F6F6 !important;
 border:1px solid #e6e6e6 !important;
}

ul.posts>li, ul.topic-list>li
{
    border: 1px solid #6b6b6b !important;
    border-radius: 5px;
    padding:0.25em;
}

ul.topic-list>li div.card
{
    border-left-width:4em !important;
}

.timeago
{
font-size:0.75em;
}
.timeago:after
{
  content:")";
}
.timeago:before
{
    content:attr(title) "("
}

input.title.form-control
{
border-width: 1px !important;
border-style: solid !important;
border-color: #cccccc !important;
margin-bottom:0.25em !important;
}

select.form-control.category-list
{
    padding: 0px !important;
    height:1.5em !important;
}

.tags-container input
{
border-width: 1px !important;
border-style: solid !important;
border-color: #cccccc !important;

}




}

Lorne Kates

Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.

fwd

wish list:
restrict width of text in posts. Ideal paragraph width is like ~15 words across.
make the "there are new posts" box not move everything else on the page when it appears
kill the fadeaway when clicking on a post or whatever

Dragnslcr

@Lorne-Kates said:

Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.

I don't know what you're talking about. A 1-pixel wide, very light gray line isn't enough of a divider for you?

xaade

@fwd said:

Ideal paragraph width

That's because people have made it a habit to not read, and therefore can't bother themselves with digesting anything complex.

xaade

@Lorne-Kates

how do you make the post/reply buttons border-radius.

I tried a[component="post/reply"] { border-radius:4px; } and that didn't seem to work

calmh

@Dragnslcr said:

@Lorne-Kates said:

Also, borders around posts in a thread and on a list. Because FUCK YOU, I don't want to just guess where one whitespace-filled node ends and a nother whitespace-filled node begins.

I don't know what you're talking about. A 1-pixel wide, very light gray line isn't enough of a divider for you?

The everywhere repeated reply/quote buttons (neither of which seems to be accept a selection as a quote) and updownvote crap aren't enough as separators?

loopback0

ITYM Lorne's "Let's Make This UI Less Shit But Not Include Screenshots" stylesheet thread.

tufty

@calmh

tufty

Dammit, that backfired.

FrostCat

@xaade said:

how do you make the post/reply buttons border-radius.

Why would you want to do that, Jeff?

xaade

@FrostCat because rectangles having sharp corners are a distraction to me. They draw my eyes to the corner of the buttons, taking my eyes away from the function in the middle.

Rounded buttons don't do this. Rounded buttons appear to have pressure on the corners, directing my eyes to the center.

tufty

@xaade I'd go for a.no-select myself

boomzilla

@xaade said:

That's because people have made it a habit to not read, and therefore can't bother themselves with digesting anything complex.

No. It's how most eyes work. @PJH excepted, of course. I agree, this maximum widescreen styling bugs me, too.

div .content {
    max-width: 100ex;
}

tufty

@calmh

repeated reply/quote buttons … and updownvote crap aren't enough as separators?

They shouldn't be on a separate row, so the point should be moot. Float them right at the top (or bottom) of the content, gain a bunch of space per comment, and thus increase the information density. Save on scrolling effort.

xaade

@boomzilla It's definitely an efficiency gain. I'm not arguing that. Just like my deal with rounded buttons.

On the internet, of course, it doesn't matter, the whole point is quick digesting of data.

I'm speaking in general. We've seem to have lost the art of reading / listening.

xaade

@tufty said:

thus increase the information density. Save on scrolling effort.

Too dense and then you lose efficiency on parsing.

UI is not a concrete thing, it's give and take.

boomzilla

@xaade said:

I'm speaking in general

Then you shouldn't use phrases like, "That's because.."

xaade

@boomzilla Yes, father...

darkmatter

Which of the dozens of UI themes is this CSS for? All of them? The default theme? A specific theme?

DoctorJones

@xaade said:

~~Rounded~~ Women friendly buttons don't do this.

Filed under: FTFY

xaade

@DoctorJones

I don't know why people relate finding efficiencies to reduce effort as a feminine trait.

If someone's definition of masculinity involves more effort as a bragging right, then evolution must be unmanly.

DoctorJones

@xaade relax man, it was a reference to this:

Feb 29, 2016

The Cyrcle Phone: Meet the 'feminine-forward', round-shaped smartphone 'for women'

Marvel at the circular smartphone creation from start-up dToor that's 'designing the opposite of a rectangle'.

darkmatter

@DoctorJones I thought it was a joke about how women don't like to date squares, they only like the cool guys.

DoctorJones

@darkmatter said:

@DoctorJones I thought it was a joke about how women don't like to date squares, they only like the cool guys.

It's like an ogre, it has layers.

xaade

@DoctorJones

Had I known about that device, the joke would have been funny.

Holy hell that thing...

Ok, so it's supposed to be round, but the screen is still square... function still wins over form.... and the designer still doesn't get it.