We finally learned to center a div, then browsers added sidebars

4 hours ago

Centering a div used to require absolute positioning and transform, but now can be easily done with CSS grid and place-items.
The author's site appeared centered only within the webview, not accounting for browser sidebar or DevTools panels.
The initial fix used JavaScript to compute browser chrome width and apply a translate, but it failed when DevTools was open because the total width difference was split between both sides.
The final solution uses pointer events to determine the viewport's position on the screen, allowing accurate offset calculation regardless of browser UI layout.
The author created a tool called 'center, actually' to apply this fix to any page, automatically detecting the centered element or allowing manual selection.

The author discovered a minor bug where font size was slightly off due to rounding errors during conversion from px to rem units.
The site’s layout evolved from fixed widths (450px/600px) for older monitors to a responsive design using breakpoints and smooth scaling.
An interactive calculator was developed to automate CSS calculations, eliminating manual errors from earlier conversions.

HTML5 semantic tags like <main>, <article>, <nav> help structure pages; less obvious elements like <ul>, <details>, <dl> are also useful.
Avoid excessive wrapper elements; prefer semantic markup and CSS that works with it.
Layout is fundamentally hard in GUI frameworks; understand the layouts a system allows rather than forcing your own.

This demo explains building a custom drag-and-drop system with JavaScript and CSS, using jQuery for ease while implementing core functionality manually.
The system moves elements by setting their CSS 'position' to 'absolute' and updating 'left' and 'top' properties relative to the container.
Drag mode is initiated on mousedown, items follow the mouse during move, and on mouseup, the drop is processed with collision detection on droptargets.

Readable CSS classes: Uses readable class names via Svelte's component CSS scoping, CSS modules, and a custom preprocessor for styling child components.
Global variables: Exposes global variables (e.g., _settings.display_accent, _api) for userscripts and debugging.
Responsive design: Features a responsive layout with a sidebar that switches to icon-only mode at specific breakpoints to save space.

Hasty Briefsbeta