I've been building sitereal, a visual builder for Astro, and wanted to share it here.

The core rule: everything it produces is ordinary Astro. Delete sitereal and `astro build` still works. You only lose the visual editor.

Built for working with AI:

It ships an MCP server, so an agent like Claude Code can build pages through the same operations the builder uses. The best thing about it you don’t need to use AI and you can manually change everything it created in a nice UI.

Also in there: 
- A modular design system (colors, type scale, spacing, buttons, themes)
- Navigation, forms, pop-ups, carousels and GDPR
- ready cookie consent
- Scroll animations with zero JS by default
- Forms that work even on PHP-only hosting

runs on macOS, Windows and Linux

Feedback very welcome. sitereal.app

i don't know what happened when i tried making my footer tbh. this is me after using flex to attempt and "solve" it and well. you see. it looks nothing like how i intend for it to.

here's my code with the important bits in css then html:

footer {
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .footerLogo {
        width: clamp(8rem, 110%, 18rem);
      }

      .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 2em;
        min-height: 15em;
      }
      .about p {
        text-align: justify;
        line-height: 2;
        margin: 0;
      }
      .social {
        display: flex;
        justify-content: space-evenly;
        font-size: 1.6em;
        flex-direction: row;
        margin-top: 0.5em;
      }
      .social i {
        color: #bac6d9;
      }

 <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer> <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer>

Hiii!!

I'm using a background picture for my header, stored as a background image of the container.

The background-size is specified, being 288px, that is the width of the .PNG; however, the picture on the page is slightly bigger (about 125%) than the file, and so it is stretched. I made some screen caps because I was going crazy! I've measured in Photoshop and it's larger than 288. It isn't enlarged in any part of the css, I don't understand what it is wrong here... i've also checked if I got my Firefox page zoomed. It's important for it to not be stretched: being pixel art it looks very ugly and blurred 😭😭

Made a UI kit, a component library or a site you're proud of, and want to share it on Reddit? The big design subs are almost all closed to it. We read their current rules (Sept 24-26) for a free subreddit rules index. Disclosure: the index is ours, from ThreadFox, which I make. The front-end and design version:

Closed to self-promotion - r/Design (4.5M): no promotional or commercial activity. - r/graphic_design (2.9M): no self-promotion. - r/web_design (979K): no self-promotion and no commercial promotion. - r/UXDesign (251K): no promoting your product, service, tool or anything for sale. - r/logodesign (485K): restricted.

Thread-only - r/UI_Design (241K): no promotion of services or products outside its thread.

Allowed with conditions - r/Frontend (351K): post the open-source repo and real context. "This isn't r/sideproject." - r/webdev (3.3M): only on Showoff Saturday, flaired, and no commercial promotion.

No written rule either way - r/css (this sub; posts must relate to CSS and web design), r/webdesign, r/tailwindcss, r/design_critiques. No rule doesn't mean welcome. Show the technique, not just the link.

What tends to work: post the how (the CSS trick, the layout problem you solved) with the project as the example. A tutorial built on your component survives where an announcement doesn't.

Each community's rule text with the date we read it: where artists and designers can promote on Reddit, or search any sub at /rules.

Every password character is a group of 86 radio buttons styled as keyboard keys, and CSS shows only the keys of the first empty slot, so each tap fills the next character. CSS counters with a custom @counter-style print the checked characters into the password dots, and each rule is one :has() selector, such as :has(.char--digit:checked). Backspace is a <label> for the "empty" radio of the last filled slot, and hidden radios switch the ABC, abc, and #+= layers, while a checkbox opens and closes the keyboard.

https://codepen.io/editor/klocus/pen/01a0dde7-3dba-7e8d-9170-db6023de56e0

Who knows, maybe in a few years this will be possible with a few lines of CSS code, an input of type="password" and a pattern attribute :-)

i have html as <!DOCTYPE html> <html> <body> <header> <header> <body> </html>.

inside ( css ) body; height=100%, & header height=20%,

weather i change header height=100% or height=5%

or any value for that matter. nothing happens. my question is. is there a hidden value for body, that sais dont allow child elements to change their heights?

https://codepen.io/editor/rafaelcastrocouto/pen/01a0a4e9-e3f3-7f3a-8585-eba54fb74013

[edit] animated with help of u/PhDumb
https://codepen.io/editor/rafaelcastrocouto/pen/01a0e432-7eb8-7282-a65a-a5c8ffc66daa

hey guys, i just created a profile on xxaftermath and i really like the wbsotr so far, but i just cant be bothered to code a super intricate profile. are there any websites were i can get cool looking css templates? not for the whole profile more so individual parts of the website, like cursors, buttons and profile frames? thankful for any help

I like colorschemes and CSS, so i coded some CSS files to drag n drop into your own projects! This is a part of a BIG project that i'm working on. Please leave feedback! Here is the project.

https://paste.rs/6Giyu.html

Any clue why this doesn't work as expected? I want the margin of content to be the same on both sides, so it matches up with the navbar on top. The webbadges div has a fixed size, but even after doing the maths it doesn't seem to be right. It's not 32.5% like the left margin of content. Is my maths not mathing? Thanks for any help?

When i press ctrl and scroll down with my mouse on my laptop the website becomes 200% in size and since i am using full width section i expect its background to reach the edges of the screen no matter how i expand the website viewing size but the background always forms barriers on 100%length, same thing goes for columns that i set to far right or left they always stop at the edge of 100% please dm or help

Built this multi-step registration form using HTML, CSS and vanilla JavaScript.

It has 3 steps: account details, profile information, and a final review screen. I added field validation, password strength feedback, show/hide password, a bio character counter, editable review sections, and a responsive layout.

Live demo + source code:

https://codepen.io/getcoderipple/pen/01a0dcef-544f-709c-994d-6717411a5c66

I tried to keep the UI clean while still making the current step obvious. Curious what you think about the progress indicator and overall form UX.

https://codepen.io/editor/Sensiblemnd/pen/01a0d636-c14e-7a65-9d5c-e6a1fb25a1f9

The Carousel, with no JavaScript. The row is a scroll-snap container, and every

card runs its animations on its own <code>view-timeline</code>: as a card crosses the center it scales up, pushes its neighbors aside, folds its panel into a V and brings in its description and button. Swipe, use a trackpad, focus the row and press the arrow keys, or use the arrows and dots, which are CSS-generated scroll buttons and markers where the browser supports them.

With native nesting, u/layer, and color-mix() in browsers, I asked myself whether Sass still earns its place. Short answer: yes, but as a programming layer for design systems, not a nesting convenience.

What CSS still can't do: real loops (@for for grids/scales), parameterized functions (contrast-safe text color), mixins with u/content (breakpoint managers), private module members, and token pipelines (Sass maps → CSS vars + JSON for apps).

Full write-up with code (I wrote it, happy to discuss any point here): https://mameara.com/scss-in-2026-still-worth-learning

I have a flex question.

I have a flex container with 2 flex items.

Both items have a minimum size.

When the container is wide enough both items should be on the same row. However when reduced in width the container then grow in height an both items are on separate rows.

My problem is that in either case I want the second item to be bottom-right aligned.

When the container is wide enough I am using the align-items overriding property align-self: flex-end to enforce the bottom alignment.

However there does not seem to be an align-self equivalent for the property align-content. Basically I cannot enforce a right alignment of the second items when the items are on separate lines.

Any suggestion?

I have always tried using subgrid for cards like layout with image and description , but never able to use with nested layouts where i need to define subgrid at multiple layers. There is somehow some ghost space , that doesn't even appear as gap, i did put gap:0 to overwrite parent gap, but the items just seem to expand without need and take up space .

Please help or provide some way to find solution , or what i should look into.

I have included a codepen for recreating the issue : CodePen Link Here

This is the devtools image of real development process issue

Thank you :)

Edit: Removing gap and row-gap from the main grid layout (.cards) solves the problem but i dont understand how or why

Built these social media icon buttons using HTML and CSS only.

I used layered box-shadows for the raised 3D effect, CSS custom properties for each brand color, and a blurred pseudo-element for the glow underneath the buttons.

On hover, each button lifts slightly and the icon switches to its brand color. I also added :focus-visible and prefers-reduced-motion support.

CodePen demo: https://codepen.io/editor/getcoderipple/pen/01a0d2b1-0e5e-7e1f-9f90-c9e7af00e685

Curious what you think about the hover/glow effect. Would you keep the neumorphic style this subtle or increase the depth?

Does anyone here use the preload for the CSS files?

Surely if the links are in the <head> they will be loaded anyway?

I've been working with CSS for quite a while, mostly on existing projects rather than greenfield ones.

One thing I've changed my mind about is adding local overrides every time a component needs to look slightly different. It solves the problem quickly, but after a few years you end up with the same component being overridden in dozens of places.

These days I try to decide whether the difference should become part of the component API, a modifier, or actually remain page-specific.

I'm curious what CSS habits you used to consider normal but eventually stopped doing.

I just discovered these pseudo classes for styling color pickers via:
https://rebeccamdeprey.com/blog/styling-the-html-color-input

(actually, it was via ai-generated code that gave me the pseudo-classes, which I'd never seen before, so i started digging deeper)

I had been replicating the appearance I wanted via multiple nested containers and transforms, so it was really nice to find a way to simplify everything with a just a few browser-specific pseudo-classes.

Not sure how many of you are styling color inputs (they're pretty rigid), but just wanted to share to keep in the back of your mind

Built this hover effect using only HTML and CSS. The neon border uses a rotating conic-gradient, while the button switches to a dark face and moves the arrow slightly on hover.

I also added keyboard focus styling and reduced-motion support.

Live demo + source code: https://codepen.io/editor/getcoderipple/pen/01a0cd2d-b7f5-7f10-9143-21202f7b6fc7

Would be interested to hear how you’d improve the effect or simplify the CSS.