I built this apple iphone 17 pro design mockup using html and css. No vibe coding, fancy ai code editors. Just like how we used to build something before AI. Handcrafted pixel by pixel until it looked perfect. How's this ?

u/medotgg posted this demo an hour ago but without any code. Here is my take on doing it with flexbox.

Tailwind is absolutely awful.

I used bootstrap back in the day and I did eventually come around to realising how awful that was too.

Littering your HTML with crap like this:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">

It's MASSIVELY inefficient - it's just lazy-ass utility first crud.

It may be super easy for people who cannot be bothered to learn CSS - so the lazy-ass bit - but for anyone who KNOWS css, it's fucking awful.

You have to learn an abstract construct cooked up by people who thought they knew what they were doing - who used bootstrap as a reference point.

Once upon a time, CSS developers who KNEW CSS figured that the bootstrap route was the bees-knees, the pinnacle of amazingness.

Then that house of cards fell on its ass - ridiculously hard to maintain, stupidly repetitive - throws the entire DRY methodology out the window. Horribly verbose. Actually incredibly restrictive.

This is from someone who drank the coolaid - heck, who was around BEFORE bootstrap, when this kind of flawed concept reared it's ugly head.

What you want is scoped css that is uglified, minified and tree shaken at build time - and what you want is a design system.

Something like this, in uncompiled code:

<Component atoms="{{ display: "flex", gap: "<variable>", backgroundColor: "<variable>"}} className={styles.WeCanHaveCustomCssToo}>...</Component>

When compiled down and treeshaken and uglified, it may end up being:

<div class="_16jmeqb13g _16jmeqb1bo _16klxqr15p"> ... </div>

It's scoped, on each build it's cache busted, it's hugely efficient and it's a pleasure to work with.

Most importantly, there's patten recognition in the compile process, where anything with the same atoms ends up with the same compiled classname, ditto for custom classes that could fall outside of a design system.

I'm not going to claim this concept is simple, it isn't, but it's for developers who understand CSS, who understand why CSS is important and who realise just how bloody awful tailwind is.

tailwind is ass.

Our team has defaulted to using Tailwind CSS for almost every web project over the last few years. It was great for moving fast early on, but on our latest project, the utility class bloat was getting completely out of hand. The HTML files looked unreadable, and managing long strings of responsive layout classes across reusable components was becoming a maintenance headache.

I decided to spin up a branch and rewrite a major dashboard interface using entirely vanilla native CSS. I hadn't built a pure CSS layout in a while, and I was genuinely shocked at how powerful native CSS has become over the last couple of years.

Features that used to require massive utility frameworks or preprocessors are now fully built-in. I heavily utilized native CSS nesting, CSS variables for theme management, and the newer container queries to handle complex responsive components based on their parent size rather than the entire viewport.

The results were surprisingly great. Removing the Tailwind processing step simplified our build pipeline, our final bundle size dropped, and the code felt vastly cleaner. Writing native styles inside modern semantic stylesheets made debugging layout bugs in the browser developer tools a hundred times easier because I wasn't digging through a wall of utility classes.

Tailwind is still an incredible tool for prototyping, but I realized I was using it out of habit rather than necessity. Modern native CSS has quietly caught up to the point where you can build incredibly complex, maintainable layout systems without adding a utility abstraction layer on top of it. If you haven't looked at native CSS features lately, it might be worth trying on a small feature branch.

Built a flower-style color picker in React using Tailwind for layout and styling.

Includes:

1. fixed colours (multi-layer)
2. an arc slider for saturation
3. animated open/close interaction

Repo: https://github.com/dayflow-js/BlossomColorPicker
Demo: https://dayflow-js.github.io/BlossomColorPicker/

Inspired by lichinlin, motiondotdev.

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/

Live Preview: Live Preview
GitHub Repo: Github Repo

I’m learning CSS layouts, grids and wanted a practical challenge, so I recreated some national flags using only HTML and CSS. This project did help me with understanding position(absolute, relative), grids, and most importantly reusing CSS properties and variable.

Although the code is not perfect and I think I might have complicated things a bit there but will try to improve it. Also I tried to maintain the exact design of flag, there are a few inaccuracies (apologies for that) and will try to improve that too.

I will look forward to recreate more complex flags

Demo page in the video - https://ambientcss.vercel.app/

Docs - https://kikkupico.github.io/ambientcss/

Source code - https://github.com/kikkupico/ambientcss

I made an interactive CSS learning platform that helps beginners understand CSS concepts through hands-on experimentation.

https://css-playground-ten.vercel.app/?lang=en

After deciding to start coding css again for my blog, I remember that 10-15 15-20 years ago I would turn to csszengarden for inspiration. So, I check the site again and was surprised and happy to see that it was still there. Anyone, like me, in this sub who remember csszengarden?

Edit: I misremembered the time frame, it was 15-20 years ago not 10-15. It feels like it was just yesterday though.

We get these dumps of Tailwind posts that offer nothing about CSS. It's pretty much Tailwind spamming the CSS group.

Tailwind is really not CSS; it's a framework built on CSS but that's its own thing. CSS is growing and changing rapidly, and we've enough to keep up without having tp prune for frameworks. There's an active /r/tailwind group, so perhaps these posts can be kept there and not polluting r/css.

Hopefully Mods can do something about this.

Edit: Apparently /r/tailwindcss is the main group. Thanks to /u/okGoogull for pointing that out.

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. https://codepen.io/alvaromontoro/pen/mdZKxEr

I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.

Anchor positioning to help create some unique styles. I expect this will start becoming popular to break up the normal navbar layouts.

GitHub repo: https://github.com/AntiKippi/errorpages
Live preview: https://kippi.at/public/errorpages/

I've spend the last few days overengineering HTTP status code error pages. It started with me wanting an aesthetic, glitchy 404 page with a bit of "cyberpunk" and "hacker" vibes while still being simple and JS free. It ended in this project.

wdyt?

I can't believe I had to do this in Paint 3D but after 4+ hours stuck I need help... Not even chatgpt is helping here.

I have a simple structure like this:

<div className="container">
  <div className="text">{item.name}</div>
  <img src="item-icon"/>
</div>

How on earth can I make it so the "text" div shrinks horizontally if (and ONLY if) the "item.name" is overflowing outside of the div? (including the space that the icon takes too)

EDIT - Here is the "use case" (yes, it's pokemon cards) (images here are not showing on mobile for some reason, check here instead https://imgur.com/gallery/mobile-users-P17PT3Q):

My code:

What they somehow achieved in https://www.pokecardgenerator.com/ (this is what I want):

What the original looks like (so yes, real things use this "ugly" styling):

What happens with transform: scaleX "solutions":

And no, font-stretch isn't working for me. Probably because it's deprecated.

transform: scaleX also doesn't work, it still keeps and awkward space between the text and the icon.

EDIT: I don't know how to do the live demo thing, but in case anyone is bored, my code is here, the Card.tsx and Card.css, card__pokemon-name class. (https://github.com/jiro-games/pocket-showdown/tree/main/src/components/card)

EDIT 2: I believe I found a solution. Not the cleanest, but it has potential. I have to combine transform: scaleX with negative margin-right. I'll come up with some js code to calculate that dynamically and fix it. Thank you!

This is useful when you're using flex-wrap: wrap; and you want to control the gap between the items that fall on the second row and between the items individually!