DEV·2yMake naked websites look great with matcha.css!
matcha.css is a drop-in semantic styling library in pure CSS that can make naked websites look great without any build steps, JavaScript, configuration, or refactoring. It provides additional modern styles out-of-the-box and is easily customizable and reversible.
asayer·2yUsing the upcoming CSS when/else rules
Learn about the upcoming CSS when/else rules which provide a mechanism for applying styles selectively based on specific conditions. These rules are still in the proposal stage and not yet implemented in browsers. The @when rule allows for selective styling, dynamic adaptability, specific conditions, user interaction, state and event styling, customization, and enhanced usability and aesthetics. The @when/@else rules simplify conditional styling and improve readability. They can be implemented by checking browser support, writing base CSS, defining conditions, using @when to apply conditional styles, and using @else for alternative styles. Some advanced techniques include combining with CSS preprocessors and using dynamic styling based on conditions. Best practices include planning CSS, using flexible units, maintaining consistency, and documenting code. Debugging techniques involve using browser DevTools, isolating rules, and eliminating possible causes of issues.
DEV·2yIntroducing DIVZ - a React component to scroll, swipe & zoom through HTML content on the 3D z-axis
DIVZ is a free open source React UI component that enables scrolling, swiping, and zooming through HTML elements on the 3D z-axis. It offers simplified integration, diverse applications, and broad device support.
InfoQ·2yYou Don’t Need a CSS Framework
CSS frameworks offer short-term gains but become hard to maintain over time. Developers often have to override the framework, which leads to a custom framework that is difficult to maintain. CSS frameworks are hard to enforce consistency with and often deviate from an application's design needs. It is recommended to write custom CSS using modern CSS features for better maintainability and flexibility.
Community Picks·2yCSS tools for for designers and coders
CSS Bud provides high-quality CSS tools and snippets for designers and coders. It offers CSS generators such as shadow generator, text glow generator, and underline generator. It also provides text tools like word counter and character counter. In addition, helpful links to curated design websites and additional CSS tools and resources are available.
web.dev·2yWhat's new in the web
The post discusses the recent updates and additions to Baseline, including the Web Platform Dashboard, RUM Archive integration, container queries, :has() selector, subgrid in CSS grid layout, CSS Nesting, <search> element in HTML, responsive video, inert attribute, color-mix() function, :user-valid and :user-invalid pseudo-classes, Compression Streams API, Declarative Shadow DOM, and Popover API.
Community Picks·2yJoin us for the next Frontend Challenge: June Edition
The Frontend Challenge: June Edition has two June-themed prompts: CSS Art and Glam Up My Markup. Participants can submit their projects using the provided submission templates. The challenge ends on June 9 and winners will be announced on June 11.
DEV·2yHow to Create the Perfect Transparent Login Form
Learn how to create a stylish and see-through login form using HTML, CSS, and JavaScript. Follow step-by-step instructions to design the form structure, style the background image, style the login box, make the title look good, style the email and password sections, style the labels and text boxes, and finally make the login button look good. The result is a simple and attractive login form that can be customized further.
Hacker News·2yOld Dogs, new CSS Tricks
New CSS features have been shipped in recent years, but their adoption remains slow due to various factors, including browser support, lack of urgency, and changing design trends. To overcome the habit of sticking to old CSS patterns, it is important to rethink established patterns, experiment with new techniques in safe environments, and find inspiration from best practices in real-life projects.
