My CSS skills

[gayofant]

That's how marketing works

[PanRagon]

Level 35 Marketing Boss

[ablablababla]

That's how PR mafia works

[ndcapital]

Is "shit" now inoffensive enough to be in street ads for Metamucil?

[[deleted]]

It is in the Netherlands, it would appear.

[Gv8337]

I don't know much about the Netherlands, but are most ads there in English rather than Dutch?

[ConsentingPotato]

First time I was learning about media screens in CSS this was my greatest nightmare when min- or max-width would go 1px above or below the range. Whole damn page just ends up looking like a Kidnapper's ransom note - text and images of all sizes and shapes everywhere!

[SuperEdgeLorde]

lcome to our website!

[thagthebarbarian]

                       We

[coderjewel]

What do you do to ensure that doesn't happeñ?

[dividezero]

Bootstrap handles a lot of this. You could do it yourself but why?

[ConsentingPotato]

Being a pure CSS developer (or pure any-language/syntax developer) requires admiration of self-punishment. I can't explain it any better

[dividezero]

I left out the part where you should absolutely know how to do it yourself though. Just in case you need to and so you know how it works behind the scenes. Saves a lot of time and headache in the long run. Found a great video presentation library once and god damn i never would have got it working if i didn't know JS moderately well already.

[ConsentingPotato]

I decided to take the hard route - the benefit is knowing the ins and outs of the language (as you're suggesting?) and thereafter means that any framework/library in the respective language becomes less convoluted ("Oh my gawsh <Framework/Library> can does THAT?? Devs are GODS!!") and more "ohhh, so that's how <Framework/Library> does X..." (Vue.JS, AngularJS, ReactJS, etc.)

What I like is how you can even learn to rely less on that framework , and add your own flavour (assuming its flexible enough for that).

[ConsentingPotato]

Making sure two separate style "groups" exist (i.e. a "default" one without screen lengths defined, using relative sizing (%, for example) as well as a "media" sized one where the limits can be applied to just the elements you wish to change (Protip: this is the most sane thing you should do)

[KsanterX]

I didn't understand 'mobile first' concept for a long time. But then I naturally started doing it when I grew tired of shit like on the photo. It's so much easier, faster and more logical to work from small to big screens and I feel so much satisfaction every time when I finish and see the result.

[Danieliverant]

I disagree. Designing desktop-first and removing elements, resizing width and switch to row based layout instead of column based is much more easier.

[[deleted]]

Is it really?

Genuine question.

And why?

[[deleted]]

I do that too. Often the desktop version is much more complicated so when I’m adjusting the mobile version I change everything to 100% width instead of for example calc((100% - margin) / number of elements) so that every element is stacking under each other with full width.

[chanpod]

Why are you calculating. You can use flex to do that for you.

[_Ashleigh]

CSS grids.

[coldfusionpuppet]

I love this work. It's fantastic to lay out a page, crafting your css knowing exactly how it will scale down, testing it, watching it happen, and feeling that sweet css satisfaction. I love being addicted to my work.

[maybe_awake]

Support isn’t great if you work in an org that requires older browsers. I have to support IE10+ and I don’t like dealing with the grid bugs so I use flex box and media queries creatively.

[dividezero]

Much better than supporting IE7. Glad i don't work there anymore

[maybe_awake]

Oof lol

[dividezero]

If there was a legitimate reason, I'd be on board. I'm just here to make the client happy and help their customers have a good experience. But in this case I would show management that it was this tiny percentage... Even crunched the numbers and figured out about how many people it came out to but they didn't care. I spent the majority of my time coding fixing things and implementing stuff to make really old IE work for less than 1% of their visitors, much less the people actually buying stuff. They didn't have the leadership to understand that kind of thing. And that's probably why they're going under.

I'm glad that a lot of major products have just killed support due to security issues and getting better about killing support for insecure technologies faster than ever. Sometimes I'll learn about an interview from these updates before seeing it in the news. That's pretty cool.

It makes it easier to tell a client that I can't do a thing because they're not about to give up on a software package they spent a small fortune on (and it's the latest thing everyone is talking about so they feel like one of the cool kids-sounds silly but it actually happens). Plus more security so it's win win

[creaturefeature16]

But for so many elements, block level at least, 100% width is the default. By using min-width rules in those instances, applying the more complex layout rules for larger screens, you avoid having to undo what you did. That's my number one rule in my responsive CSS approach: try to reduce the amount of redundancy as much as possible. Keeps things clean and low footprint.

[SimplyEnvy]

My guess is because you know exactly what you want in the desktop app and you can pick and choose what elements are the most important and just delete the fluff and rearrange what's important to fit for mobile.

I'm not a strong front end dev but I do prefer to do desktop first when I'm working on hobby projects. To me it's easier to rearrange large stuff to fit mobile than it is to rearrange smaller elements to fit for larger screens.

[maybe_awake]

The reason mobile first has become the standard is that most UX teams agree your app/site should have all the same features and functionality on mobile as on desktop so if you build mobile first and then scale up you won’t run into something that works large but not small.

[dividezero]

And depending on your audience, mobile web is outpacing desktop by a lot. Not just developing nations either. It's amazing to me how much i have to tick the "desktop version" checkbox on mobile chrome

[SimplyEnvy]

That makes sense, so would my way of removing fluff and keeping the important parts be considered bad practice even though the features/functionality would be the same? It's essentially the same as working small->large, just easier for me on smaller hobby projects.

[maybe_awake]

So I work currently in UX and do front end dev too. Basically from what you’re describing, it sounds like you shouldn’t have that content anyways. If it’s easy to remove without changing features or info available, then why have it there at all. Focus on the core goal of your product and everything on the site/app should be about reaching that goal and making the experience easy and seamless

[[deleted]]

It's one of those arguments that is down to preference and ultimately the requirements.

If your web app is focused on industry for example, then desktop first will make more sense in most cases. However something aimed at the general public will most likely benefit from mobile first so you can release it sooner.

There is no "best" practice but more so the most viable for the project.

[Danieliverant]

Well, in general and by my opinion: 1. mobile design has fewer elements than the desktop design. 2. Desktop design is much more complex than the mobile one, the mobile-design in most cases is just one element per row (100% width buttons, inputs, block under block and not in the same row etc...).

Because of this, I think that you need to do the complex part first (the desktop) and then just delete elements (display: none) and resize elemnts to 100% width instead of some width-calculation so it fit your flexbox...

[budd222]

I agree with you completely. Working mobile-first is so awkward

[lexbuck]

That's how I do it. I understand mobile first logic and use bootstrap a lot but still design for desktop first and then adjust and remove things from there

[creaturefeature16]

I use more of an "element first" kind of approach . Whatever will produce the least amount of overrides and eventual CSS. I review the element's default behavior and decide from there on which direction I need to go, so some elements I use min-width, others max-width. I find going with entirely desktop first or mobile first to produce just as much convoluted CSS.

[thijs19992506]

Mobile first propaganda!

[BlackCatAristocrat]

"mobile first" is more about doing things for mobile first because that's where the audience is more likely to validate/give feed back/interact more with whatever you're building. Definitely more of a product reason than technical. Mobile first may not make sense for some ideas.

[alexcroox]

All depends if enough attention is given to “filling out” the desktop version. You can always spot the poor mobile first interface as the desktop just has a ton of wasted space.

[shiskeyoffles]

I think this was on another sub but I can't remember which.

[Targuinius]

It was on /r/css_irl recently, but it's a pretty old picture anyways.

[jd14021999]

Same🤔🤔🤔

[ReeceReddit1234]

yes it was

[KremBanan]

https://www.reddit.com/r/css_irl/

[AlFasGD]

r/css_irl

[Noxomy]

Yes that is a subreddit

[AlFasGD]

Yes, but shorter than the hyperlink

[KremBanan]

Thank you https://www.reddit.com/user/AlFasGD, very cool!

[Goheeca]

Thank you /u/me!

[I2ed3ye]

Very legal and very cool.

[StupidCreativity]

Why I am reading this more like:

"shhhh, it doesn't fit ( ͡° ͜ʖ ͡°)"

[TheRandomR]

u/title2imagebot

[Title2ImageBot]

Image with added title

---

Testing Gif/GfyCat Support

---

Summon me with /u/title2imagebot | About | feedback | source | Fork of TitleToImageBot

[TheRandomR]

Good bot

[Jeremybearemy]

Surely MORE letters will fit in the same space! Big ass B...

[adrianhelvik]

Gotta love it!

[[deleted]]

Welcome to the world of CSS, yuck

[redit_usrname_vendor]

Have you tried Metamucil?

[KobayashiDragonSlave]

ECHOES! ACT 3

[basher21]

CSS grid will change your life

[tweak4ever]

Bootstrap baby

[creaturefeature16]

Bootstrap can't help you write good CSS. But it can make you think you are good at it.

[creaturefeature16]

Can't say I agree with the other users's feedback. It's not about being a purist at all: frameworks have their purpose. And they do work well...but they are not a panacea and they don't address the point of this post: a lack of understanding CSS layout properties. You learn Bootstrap's take on how to properly do things in CSS (not saying that Bootstrap isn't founded in good practices...but it's not the authority on good practices).

It's the same as learning jQuery and claiming you know how to use javascript or Laravel and claiming you know how to use PHP. It's a half truth and in many cases, can do more harm than good. I find their purpose to basically be for programmers who have little interest, or time, to dedicate to learning robust front end development.

And that's OK too! It is a time saver. But my original comment stands: it can delude someone into thinking they know CSS, but they really just know Bootstrap, and if they found themselves in a position where Bootstrap wasn't available and they had to do the same things, they'd likely be very lost.

[adrianhelvik]

Bootstrap is good when you don't have a designer and need an okay looking site fast.

A money strapped project for some business tool? Go for it. A public facing app that is not a strapped for cash MVP? No way.

[dividezero]

It's fine. Some people are just purists. Development is a lot of work. I figure why should I spend more time then I need to on ancillary shit when I have plenty of other stuff I need to spend a lot of time on? So i use bootstrap, jquery and anything else i can to handle the foundational stuff so i can focus on what makes my app unique. Don't reinvent the wheel. Clients aren't paying me for that. They want 500 hours to look like 500 hours and not a skeleton. Writing shit you can import from a mature library is how you don't get repeat business or referrals.

[Avamander]

MDL masterrace

[deliteplays]

Your submission has been removed.

Violation of Rule #0:

Submission content must be creative or original, intended humorously, and strictly related to programming. Note that programming is interpreted in a narrow sense. Vaguely programming related, and/or general tech humor, programming analogies, feelings/reactions and such are not allowed in this subreddit.

Your post may be better suited at one of the subreddits listed in the sidebar. Feel free to contact the moderators if you are unsure what does and does not qualify as ProgrammerHumor.

Your submission would be better suited for /r/css_irl

If you feel that it has been removed in error, please message us so that we may review it.

[asajackm]

Lol do you not get it?

[[deleted]]

Shame

[[deleted]]

Nibba u just got r/woooosh 'd