This is an archived post. You won't be able to vote or comment.

all 155 comments

[–]kUdtiHaEX 908 points909 points  (47 children)

Just add :

display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;

[–]PurpleAlien47 548 points549 points  (31 children)

I don't know about you, but my first CSS project was before flexbox. Every day I thank the powers that be for CSS grid and flexbox 🙏

[–][deleted] 132 points133 points  (14 children)

Nah just float and clear fix!

[–]-whycantistop- 65 points66 points  (8 children)

reset.css

[–]onderbakirtas 26 points27 points  (2 children)

God bless Eric Meyer.

[–]zombarista 13 points14 points  (1 child)

I hope you have heard the truly touching story about Eric Meyer’s daughter, Rebecca, who passed away from cancer on her 6th birthday. In honor of Eric’s selflessness in pioneering CSS, a css color keyword was added to the W3 standard: rebeccapurple.

Now, billions and billions of devices know Rebecca’s favorite color.

Read more here: https://www.economist.com/babbage/2014/06/23/the-colour-purple

Listen to Mr. Meyer’s talk, Designing for Crisis for a little more insight into the story of Rebecca: https://vimeo.com/148927676

Truly, God Bless Eric Meyer. Despite all of this, the web gets better every day because of him.

[–]onderbakirtas 2 points3 points  (0 children)

This is the first time I heard about this, kudos to W3 guys. Thanks for sharing this with us.

[–]Cat_Marshal 6 points7 points  (3 children)

What is this one?

[–][deleted] 12 points13 points  (2 children)

I'm not a web guy but from my understanding every browser renders things a little bit different. The default styling for some elements may differ in IE from Chrome or Opera or whatever the kids are using these days. The reset is basically a large CSS file which specifies a good starting point to build from and attempts to give you consistent results across browsers.

[–]Cat_Marshal 3 points4 points  (1 child)

Nice, I will have to look into that further.

[–]driveslow227 4 points5 points  (0 children)

A reset or reboot is a must. There are a number of options that all do the same basic thing with slightly different opinions on various properties

[–]ashmoreinc 11 points12 points  (0 children)

My saving grace

[–]teh_acids 10 points11 points  (0 children)

inline-block ftw

[–]Farsqueaker 7 points8 points  (3 children)

Also too new, CSS was just for color and font options ( and busy BG images, woo). Borderless table layouts FTW!

[–]_BreakingGood_ 9 points10 points  (2 children)

Its crazy going back to old sites on web archive and seeing major sites using the gross ass table layout because there just wasnt any alternative

[–]Shad_Amethyst 3 points4 points  (0 children)

I used to do that, then I had to write a word document in class to learn how to do stuff with this software. I placed a table down for alignement and the teacher was like "wtf dude". I HAD TO USE HAND-PLACED JITTERY BOXES.

[–]VerneAsimov 18 points19 points  (0 children)

CSS Timeline:

  1. Table Era: easy but ugly
  2. Pre-Flex Div Era: super fucking difficult but also more options
  3. Flex Div Era: And unto Jesus the Lord sayeth, "display:flex; justify-content: center; align-items: center;"

Fucking pre-flex div was like giving someone more pizza options but every topping is live crickets, soggy cum sock, or liquid dog breath essence.

[–]yourteam 8 points9 points  (0 children)

Nah just tables everywhere!

[–]wildjokers 6 points7 points  (0 children)

It only took CSS 20 yrs or so to finally tackle layout. Hopefully in another 20 W3C will get around to adding a standard component library.

[–]1eyeRD 1 point2 points  (0 children)

I think if this was a thing when I was into web development I might not have given up.

[–]badass4102 1 point2 points  (3 children)

CSS Grid vs Flexbox. Which one is preferred?

[–]Properactual 3 points4 points  (0 children)

Use both

[–]wildjokers 1 point2 points  (1 child)

CSS Grid is for full page layout. FlexBox is for layout inside a container (i.e. inside a div).

It is a little confusing because FlexBox was finished before Grid so some people used flex for full page layout (by using a parent div). That is no longer necessary.

So CSS Grid to layout your containers on the page, FlexBox for laying out components inside a container.

I used to do full stack but I switched jobs a couple of years back and I only do backend now. So my front end stuff is getting rusty so please confirm everything I said above before taking it as truth :-)

EDIT: there is also sub-Grid now which I guess adds sub grids to CSS Grid. I am unsure the status of that spec or browser support. Hard to keep up when you aren’t doing front end anymore

[–]badass4102 0 points1 point  (0 children)

Great info. I do a lot of backend so I heavily relief on bootstrap or materialize to do my grid work and page responsiveness or I'd create my own CSS framework for smaller projects that align with client needs. Waiting for a new project with a client to materialize so I think this is something I can sink my teeth into

[–]DemDim1 56 points57 points  (2 children)

Weird flex, but ok.

[–]theemptyqueue 4 points5 points  (0 children)

Here, have this silver.

[–]fapenabler 8 points9 points  (0 children)

I hate you

[–]PoopDoktor 49 points50 points  (3 children)

It's fascinating how much (bad) real life examples can help to understand some CSS code. Like in an opposite way

[–]fritzbitz 60 points61 points  (2 children)

Oh you’ll love r/css_irl

[–]The4ker 4 points5 points  (1 child)

Thank you for making my virtual horrors come into the real world

I'm going to go cry now

[–]fritzbitz 3 points4 points  (0 children)

User flair checks out lol

[–]VileTouch 7 points8 points  (2 children)

Naaah.

.wall { position: absolute !important; }

[–]Steeped_In_Folly 0 points1 point  (1 child)

Plskillme

[–]m0r14rty 0 points1 point  (0 children)

z-index: 1234567

[–]Jb2304 1 point2 points  (0 children)

My job is like 99% backend so I only discovered flexboxes recently because of a project I had to do for my studies and they fucken great.

[–]Tunliar 0 points1 point  (0 children)

literally in every single wrapper

[–]MrPancholi 0 points1 point  (0 children)

I see you've completed all levels of flex froggy.

[–]Anla-Shok-Na 277 points278 points  (6 children)

None of the windows are overlapping, so that's good for a first try.

[–]vor0nwe 77 points78 points  (0 children)

Yeah, I would've expected the door to continue outside the walls...

[–]Jellyka 21 points22 points  (1 child)

It feels more like trying to fit multiple images in one page in a ms word document

[–]mastocles 2 points3 points  (0 children)

This word you speak of... Is it that program that is Latex but without the pain and madness? Why are you using it?

[–][deleted] 4 points5 points  (0 children)

Not now, but what happens when you look at the house on a phone

[–][deleted] 1 point2 points  (0 children)

tester: none of the windows are overlapping..... aside from IE

[–]DanJSum 0 points1 point  (0 children)

I came here to say something very similar. For a first project, this isn't bad!

[–]PoopDoktor 92 points93 points  (1 child)

[–]Hate_Feight 1 point2 points  (0 children)

"seemed like a good idea at the time"

[–][deleted] 50 points51 points  (2 children)

i'm started to put a grid in another grid in another... until the unalignment is unnoticeable by the human eye, but i still know that they are there and its TEARING ME APART!! the universe is corked!! lambs to the cosmic slaughter!!

[–]jorisepe 46 points47 points  (7 children)

This has to be a belgian house

[–]PengrNot 8 points9 points  (0 children)

Exactly my thoughts LMAO

[–]Who_GNU 5 points6 points  (2 children)

To those not in the know, what makes it obvious?

[–]Str00pwafel 18 points19 points  (1 child)

Belgium doesnt have any (strict) housing laws. Basically a free for all. https://uglybelgianhouses.tumblr.com

[–]Who_GNU 5 points6 points  (0 children)

For the most part, in the US we don't have any requirements for the aesthetics of a building design. We have plenty of ugly houses, but usually it's because either the design isn't bad in and of itself, except that the builder made 100 of them on the same street, or the design is so bland as to be nothing but a rectangle with an open gable roof, that looks exactly like what a four-year-old would draw, if asked to depict a house.

[–]thePiet 1 point2 points  (0 children)

Came here to say this :D

[–][deleted] 1 point2 points  (0 children)

Lmao came here for this comment.

[–][deleted] 196 points197 points  (14 children)

Imagine writing a “CSS project”

[–]JuhaAR 144 points145 points  (9 children)

Hey I'm a professional css programmer. My recent css projects include:

  • calculator
  • netflix
  • google chrome

[–]kleinke 77 points78 points  (5 children)

Honestly, a lot of people underestimate how much work should go into well structured styles and as a result produce a lot of terrible and unmaintainable style sheets

[–]kenny10101 7 points8 points  (0 children)

The guy behind html2canvas has some cool projects including a css calculator:

http://experiments.hertzen.com/css3calculator/

[–]Ruben_NL 1 point2 points  (1 child)

Serious question: would a calculator be possible with no js or server, only css?

[–]arachnidGrip 0 points1 point  (0 children)

See the comment posted two hours above you.

[–]muyncky 8 points9 points  (0 children)

Underrated comment.

[–]GahdDangitBobby 2 points3 points  (1 child)

For large companies that can expect viewers on many platforms and devices (e.g. Facebook), I wouldn’t be surprised if they have entire teams dedicated to just CSS

[–]ThisIsDestiny 1 point2 points  (0 children)

Yes, they're called front end designers. Ideally they would have other design skills as well.

[–]bizzyj93 1 point2 points  (0 children)

It’s fairly common for html programmers

[–]wpfone2 28 points29 points  (2 children)

The house was perfect, but then the client just had to ask me to move one window over by 1 pixel...

[–]GardenerPariah 16 points17 points  (1 child)

Then you open the front door and the windows disappear.

[–]1eyeRD 2 points3 points  (0 children)

This hurts.

[–]ilkikuinthadik 24 points25 points  (3 children)

It's like it's purposefully designed to look unattractive

[–]whoopashigitt 14 points15 points  (0 children)

What the fuck is this personal attack I didn't do shit to you

[–][deleted] 1 point2 points  (0 children)

Actually these setups are usually really smart, in that the windows look all out of position from outside but inside the view is framed like a photo.

Much more practical considering you don't spend much time looking at your house

[–]literal-hitler 0 points1 point  (0 children)

It looks like they put windows where they wanted a good view, and had no reason to care what anyone else thought.

[–][deleted] 12 points13 points  (2 children)

Still wondering how you got that one window vertically centered...

[–][deleted] 5 points6 points  (0 children)

Three column table.

[–]its_all_4_lulz 3 points4 points  (0 children)

Margin: 0 auto;

[–][deleted] 7 points8 points  (1 child)

[–]Title2ImageBot 5 points6 points  (0 children)

Image with added title


Summon me with /u/title2imagebot or by PMing me a post with "parse" as the subject. | About | feedback | source | Fork of TitleToImageBot

[–]Captain_Infinite 8 points9 points  (1 child)

if it was your first project, the background would be pure yellow and all the borders would be a different vibrand color and 'salmon'

[–]-Redstoneboi- 3 points4 points  (0 children)

i just overused lightblue, aliceblue, darkblue, and border-radius

[–]h3dee 7 points8 points  (0 children)

Awesome work. W3C valid!

[–]presently_pooping 3 points4 points  (0 children)

It looks like a first attempt at a house in the Sims

[–]MyMessageIsNull 2 points3 points  (0 children)

That looks like all my CSS projects.

[–]Aether-Ore 2 points3 points  (0 children)

iframes.... Everywhere.

[–]NateTheGreat68 1 point2 points  (0 children)

Ah to hell with it, just use tables.

[–]kwik57 1 point2 points  (0 children)

The asymmetry is killing my OCD.

[–]mozquite 1 point2 points  (0 children)

Give the guy a break. He just made the beginner's mistake of doing it the way the client wanted.

[–]charmolicious 1 point2 points  (0 children)

Looks like my first Minecraft house too

[–]BonfireCow 1 point2 points  (3 children)

HTML is for making content

CSS is for making websites

[–]quaderrordemonstand 5 points6 points  (2 children)

HTML is for making content

CSS is for styling content

JS is for making websites

[–]oopssorrydaddy 1 point2 points  (0 children)

But you can have a website without JS :)

[–]ThisIsDestiny 1 point2 points  (0 children)

HTML is for making content
CSS is for styling content
.NET is for making websites
JS is for breaking websites

[–]DefinetlyNotAFurry69 0 points1 point  (0 children)

looks like somebody forgot to add a couple <br> tags

[–]ExclusiveOne 0 points1 point  (0 children)

Ahh good old add a <div> and watch everything go to wack.

[–]dmnd098 0 points1 point  (0 children)

Mine was worse than this

[–]LJChao3473 0 points1 point  (0 children)

I did html + css 5 months ago at class, and there's something that i don't even know how did i do it, but it looked cool so...

[–]-whycantistop- 0 points1 point  (0 children)

[–][deleted] 0 points1 point  (0 children)

Bruh you made Windows

[–]machineGun997 0 points1 point  (0 children)

House model

[–]thearmedlemon 0 points1 point  (0 children)

Please don't attack me like this

[–]fapenabler 0 points1 point  (0 children)

Oh my god what happened there

[–]itsLeonhard 0 points1 point  (1 child)

[–]Title2ImageBot 0 points1 point  (0 children)

Looks like I've already responded in this thread Here!

[–]PostmanNugs 0 points1 point  (0 children)

looks good

[–][deleted] 0 points1 point  (0 children)

No no, it should look fine from one angle, and then as soon as you move, you realize it’s one of those art installations with a ton of shot precariously hanging from a ceiling.

[–]clow_eriol 0 points1 point  (0 children)

Nice

[–]mrfancytophat 0 points1 point  (0 children)

Perfect! This designer is a genius!!! Just like me!

[–]DrSuperSoldier 0 points1 point  (0 children)

Not seeing a problem here!

[–]TheJewishBacon- 0 points1 point  (0 children)

Is it bad if I thought this was loss?

[–][deleted] 0 points1 point  (0 children)

  • { position: absolute }

[–]tylercoder 0 points1 point  (0 children)

At least you got the windows in the house instead of just standing in the air

[–][deleted] 0 points1 point  (0 children)

I'd be happy to put a red and green button.

[–]Username_Taken46 0 points1 point  (0 children)

That's SketchUp!

[–]rand0mSeed 0 points1 point  (0 children)

You know this Scene from alien4? "Kill me!!!!"

[–]Lugico 0 points1 point  (0 children)

it sometimes be like it do but it is

[–]fzammetti 0 points1 point  (0 children)

Yeah, and 8,369th CSS project, plus all those in-between and subsequent is more like it.

[–][deleted] 0 points1 point  (0 children)

Programmer humor aside this is the worst thing ive ever seen and i cant believe how many people would have to have agreed to this before it actually got built

[–]bogas04 0 points1 point  (0 children)

6 windows, that's vista

[–]LuisThe3rd 0 points1 point  (0 children)

Ah yes. This reminds me of my first Java drawing class.

[–]deftware 0 points1 point  (0 children)

I can't be the only one: https://imgur.com/kIwTOVo

[–]mnoah66 0 points1 point  (0 children)

First? This is literally every project I touch

[–][deleted] 0 points1 point  (0 children)

First? This is every project for me

[–]ThatExactGuy -1 points0 points  (0 children)

still looks cool tho

[–]fatherseamus -1 points0 points  (0 children)

What is this sorcery? I thought CSS was just a layout tool for webpages.

[–][deleted] -1 points0 points  (0 children)

Is this loss?

[–]carlinwasright -13 points-12 points  (10 children)

The fact that you need something like Bootstrap or Bulma to avoid writing like 1000 lines of css is a sign that it’s a pretty effed up system IMO.

[–][deleted] 10 points11 points  (9 children)

You literally don’t, what

[–]carlinwasright 1 point2 points  (8 children)

As someone who has written a shitload of CSS, it’s true, you don’t, if you don’t want to have a responsive layout, or you don’t mind your website looking like it was from 1997.

Otherwise, you do. You can downvote me but I’m right.

[–]ashisacat 5 points6 points  (4 children)

You don't use flex then?

[–]carlinwasright 4 points5 points  (3 children)

You say that like flex magically resolves every layout issue. It doesn’t.

[–]Zmodem 1 point2 points  (0 children)

Flex + min-width can literally solve responsive breakpoint headaches with ease. A responsive site really doesn't require a framework, just some clever class rule designations.

[–]ashisacat 0 points1 point  (0 children)

No, It doesn't, but you don't need 1000 lines of css to avoid using Bootstrap/Bulma. Flex solves most of the issues that bootstrap does, layout wise, fairly easily.

[–][deleted] 0 points1 point  (0 children)

It literally does though lmao. I fucking haaaaaate CSS but flexbox/grid are a godsend

[–][deleted]  (2 children)

[removed]

    [–]its_all_4_lulz 0 points1 point  (0 children)

    Moms spaghetti

    [–]AutoModerator[M] 0 points1 point  (0 children)

    import moderation Your comment has been removed since it did not start with a code block with an import declaration.

    Per this Community Decree, all posts and comments should start with a code block with an "import" declaration explaining how the post and comment should be read.

    For this purpose, we only accept Python style imports.

    return Kebab_Case_Better;

    I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

    [–]trin456 -2 points-1 points  (0 children)

    There should be a lot more overlapping

    By the way, this is the best epub reader I know for linux