Best of CSS â December 2023
- 1
- 2
- 3
Hacker News¡2y
You don't need JavaScript for that
The article discusses the rule of least power in web development, which advocates for choosing the least powerful language suitable for a given purpose. It highlights examples of using native HTML and CSS instead of JavaScript, such as creating custom switches, using the datalist element for autosuggest, utilizing the native color picker, implementing accordions, and using dialog modals. The article also mentions future features that will further reduce the need for JavaScript.
- 4
asayer¡2y
The Art of Scrollbar Styling with CSS
Customizing scrollbars with CSS allows for uniformity and coherence across a website, improves usability, and provides visual feedback for users. Basic CSS properties related to scrollbars include scrollbar-width, scrollbar-track-color, and scrollbar-thumb-color. CSS animations can be applied to scrollbars using pseudo-elements.
- 5
10 CSS Techniques for Hiding Elements
This article explores ten different methods for hiding content using CSS, including using the display property, visibility property, and opacity property. The techniques discussed can improve the user experience and create more dynamic and interactive web pages.
- 6
- 7
freeCodeCamp¡2y
đ đšī¸ đģ
Learn JavaScript skills by building a snake game inspired by the iconic Nokia Snake game. Improve your web development capabilities with a step-by-step course. Enhance the snake's size, control its movement, and track the score. Try the game before watching the course and find it on the freeCodeCamp.org YouTube channel.
- 8
DEV¡2y
Tailwind CSS - Beginner's Guide: Where to Start?
Explore the essentials of Tailwind CSS and learn where to start. Understand its utility-first approach, explore the documentation, and discover the pros and cons. Build your first project with Tailwind CSS and embrace its simplicity and flexibility.
- 9
- 10
LogRocket¡2y
Implementing scroll-aware UI state with CSS
Scroll-aware UI state can improve website user experience by dynamically responding to the user's scrolling action on a webpage. This article explores how scroll-aware UI can be implemented using CSS-only solutions and discusses the limitations of such approaches.
- 11
Bits and Pieces¡2y
Building a Component Library with React and StyleX
Learn how to build a component library with React and StyleX using Bit as a build system. The tutorial covers creating a new Bit workspace, creating components with StyleX, using tokens and themes, pushing components to bit.cloud, and installing components in a project.
- 12
Towards Dev¡2y
Mastering the Flip: A Step-by-Step Guide to Crafting an Eye-Catching HTML CSS Flipping Card UI Design
Learn how to create a mesmerizing flipping card UI design using HTML and CSS. This step-by-step guide provides all the necessary steps to craft an eye-catching card with a flip effect. Enhance your web development skills and implement this creative technique in your projects to create stunning user interfaces.
- 13
SitePoint¡2y
Clean Architecture: Theming with Tailwind and CSS Variables
Explore how clean architecture principles influence theming and how CSS variables in Tailwind CSS make theming easy to maintain. Gain practical skills in using CSS variables and creating dynamic theming in React and Tailwind CSS.
- 14
Community Picks¡2y
Creating and coding a Design System from scratch (co-authored by Zuzanna Sobiecka)
Guidelines and considerations for creating and coding a Design System from scratch. A Design System provides consistency for a brand, speed for designers, and a modular and reliable Component Library for developers. Starting a Design System can be done by deriving it from existing design or code. The DS doesn't need to be complete to be useful. Tokens play a key role in the Design System, simplifying communication between Dev and Design. The DS can evolve and should be coded as a system. Translation of the Design System into code involves creating utility classes based on tokens. Following rules and exceptions ensures fast and consistent UI development.
- 15
- 16
David Walsh¡2y
AutoGrow Textareas with CSS
CSS now supports native language improvements for automatically expanding textarea elements. By adding the field-sizing property with a value of content, textarea elements can grow vertically and horizontally. The default value for field-sizing is fixed, but the new behavior of content allows for maximum expansion. To constrain the size a textarea can grow, the width/max-width and height/max-height properties can be used.
- 17
- 18
Building Responsive Layouts With CSS Grid: A Step-By-Step Guide
CSS Grid is a powerful tool for building responsive layouts that adapt gracefully to different screen sizes and devices. It simplifies the process of creating responsive layouts, offers flexibility through special units and functions, and can be combined with other techniques like media queries, grid-template-areas, and reordering. Best practices for creating responsive layouts with CSS Grid include starting with semantic HTML, using clear and descriptive names for grid areas, debugging with grid inspection tools, adopting a mobile-first approach, ensuring accessibility, optimizing performance, and maintaining clear documentation.
