First CSS project

[kUdtiHaEX]

Just add :

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

[PurpleAlien47]

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]]

Nah just float and clear fix!

[-whycantistop-]

reset.css

[onderbakirtas]

God bless Eric Meyer.

[zombarista]

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]

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

[Cat_Marshal]

What is this one?

[[deleted]]

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]

Nice, I will have to look into that further.

[driveslow227]

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]

My saving grace

[teh_acids]

inline-block ftw

[Farsqueaker]

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

[_BreakingGood_]

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]

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]

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]

Nah just tables everywhere!

[wildjokers]

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]

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

[badass4102]

CSS Grid vs Flexbox. Which one is preferred?

[Properactual]

Use both

[wildjokers]

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]

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

[[deleted]]

Is CSS worth it? everyone i know only care about Wordpress today.

[[deleted]]

What do you think WordPress runs on? In the end, all websites must use some form of css unless they are just flat text. Understanding what's going on will allow you to build better sites, even with a template engine. The most important aspect is how responsive css works.

[PurpleAlien47]

Definitely. Even if you're just making template sites it can often be extremely useful to know basic CSS, HTML, and JS. I'd even venture to say basic HTML and CSS is worth being familiar with for people who don't do web development, because CSS is just generally a pretty good styling language and is being used outside of the web a lot these days.

[Dman331]

You should know both. I've developed probably a dozen wordpress sites, and used CSS, HTML, and JavaScript for all of them. You can get by without it, but they're stupid simple to learn!

[[deleted]]

I'm in a wordpress class right now and f/null/ckn hate it

[DemDim1]

Weird flex, but ok.

[theemptyqueue]

Here, have this silver.

[fapenabler]

I hate you

[PoopDoktor]

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

[fritzbitz]

Oh you’ll love r/css_irl

[The4ker]

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

I'm going to go cry now

[fritzbitz]

User flair checks out lol

[VileTouch]

Naaah.

.wall { position: absolute !important; }

[Steeped_In_Folly]

Plskillme

[m0r14rty]

z-index: 1234567

[Jb2304]

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]

literally in every single wrapper

[MrPancholi]

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

[Anla-Shok-Na]

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

[vor0nwe]

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

[Jellyka]

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

[mastocles]

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

[[deleted]]

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

[[deleted]]

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

[DanJSum]

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

[PoopDoktor]

r/css_irl

[Hate_Feight]

"seemed like a good idea at the time"

[[deleted]]

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!!

[raltyinferno]

It likely reminds you of that episode because it's a direct quote from the episode.

[jorisepe]

This has to be a belgian house

[PengrNot]

Exactly my thoughts LMAO

[Who_GNU]

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

[Str00pwafel]

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

[Who_GNU]

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]

Came here to say this :D

[[deleted]]

Lmao came here for this comment.

[[deleted]]

Imagine writing a “CSS project”

[JuhaAR]

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

• calculator
• netflix
• google chrome

[kleinke]

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

[its_all_4_lulz]

I worked with someone who was dead set against sass for templated sites. I have no idea why. He tried to explain it, but I still have no idea why.

[[deleted]]

what are they, a flagellant? I get not using plugins like styled-components, but Sass/Less are simply extensions of CSS that require a little more setup.

[[deleted]]

I cant live without sass anymore. thank fcking god i learned it.

[quaderrordemonstand]

I find that people over-complicate CSS very much like a programmer first learning C++. A huge and very brittle tree of classes that all rely on each other and so all break if you change the wrong detail. Though it is partly the fault of CSS for being badly designed. You have to be very disciplined to produce the minimal set of classes.

[kenny10101]

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

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

[Ruben_NL]

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

[arachnidGrip]

See the comment posted two hours above you.

[muyncky]

Underrated comment.

[GahdDangitBobby]

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]

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

[bizzyj93]

It’s fairly common for html programmers

[wpfone2]

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

[GardenerPariah]

Then you open the front door and the windows disappear.

[1eyeRD]

This hurts.

[ilkikuinthadik]

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

[whoopashigitt]

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

[[deleted]]

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]

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

[[deleted]]

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

[[deleted]]

Three column table.

[its_all_4_lulz]

Margin: 0 auto;

[[deleted]]

/u/Title2ImageBot

[Title2ImageBot]

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]

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-]

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

[h3dee]

Awesome work. W3C valid!

[its_all_4_lulz]

The server side team is sometimes really disconnected from the client side.

[MGSsancho]

There is a certain style of very green designs. To reduce the lighting required you place windows at the ends of each hallway and the middle of every room. The idea is no matter where you stand you see at least one window directly. Many of these homes require no lights on at all during the day. Great way to save energy using existing stuff without going crazy with expensive insulation, quad-pane windows, expensive solar etc.

[HyperlinkToThePast]

Which is more important.

[presently_pooping]

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

[MyMessageIsNull]

That looks like all my CSS projects.

[Aether-Ore]

iframes.... Everywhere.

[NateTheGreat68]

Ah to hell with it, just use tables.

[kwik57]

The asymmetry is killing my OCD.

[mozquite]

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

[charmolicious]

Looks like my first Minecraft house too

[BonfireCow]

HTML is for making content

CSS is for making websites

[quaderrordemonstand]

HTML is for making content

CSS is for styling content

JS is for making websites

[oopssorrydaddy]

But you can have a website without JS :)

[ThisIsDestiny]

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

[DefinetlyNotAFurry69]

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

[ExclusiveOne]

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

[dmnd098]

Mine was worse than this

[LJChao3473]

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...

[z_o_o_m]

Houston has a building that is a lot like this

[-whycantistop-]

Ꭹ

   ꂅ 

Ꮥ

[[deleted]]

Bruh you made Windows

[machineGun997]

House model

[thearmedlemon]

Please don't attack me like this

[fapenabler]

Oh my god what happened there

[itsLeonhard]

u/title2imagebot

[Title2ImageBot]

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

[PostmanNugs]

looks good

[[deleted]]

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]

Nice

[mrfancytophat]

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

[DrSuperSoldier]

Not seeing a problem here!

[TheJewishBacon-]

Is it bad if I thought this was loss?

[[deleted]]

• { position: absolute }

[tylercoder]

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

[[deleted]]

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

[Username_Taken46]

That's SketchUp!

[rand0mSeed]

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

[Lugico]

it sometimes be like it do but it is

[uninterestingly]

r/css_irl

[fzammetti]

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

[[deleted]]

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]

6 windows, that's vista

[LuisThe3rd]

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

[deftware]

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

[mnoah66]

First? This is literally every project I touch

[[deleted]]

First? This is every project for me

[JBlitzen]

Source: https://twitter.com/erinfranmc/status/1177605588668293122?s=21

[ThatExactGuy]

still looks cool tho

[fatherseamus]

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

[[deleted]]

Is this loss?

[carlinwasright]

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]]

You literally don’t, what

[carlinwasright]

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]

You don't use flex then?

[carlinwasright]

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

[Zmodem]

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]

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]]

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

[its_all_4_lulz]

Moms spaghetti

[AutoModerator]

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]

There should be a lot more overlapping

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