Hacker News·4yTailwind CSS v3.0 – Tailwind CSS
Tailwind CSS v3.0 is here, bringing incredible performance gains, huge workflow improvements, and a seriously ridiculous number of new features. Every color out of the box, including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray. Colored box shadows for fun glow and reflection effects, and more natural shadows on colored backgrounds.
freeCodeCamp·4yLearn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update
The Responsive Web Design Certification is the first of freeCodeCamp's 10 currently-live certifications. Instead of coding lessons, you'll learn concepts and syntax through a series of 15 practice projects + 5 certification projects. The full certification will take most web development beginners around 300 hours to complete.
Hacker News·4yDefensive CSS
Defensive CSS is a collection of snippets that can help you in writing CSS that is protected. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. This is built upon an article I wrote a while back called “The just in case mindset”
DEV·4yif/else in CSS
There are no conditional statements in CSS, but this may soon change with new @when and @else operator. Currently, the only way to perform a conditional statement was to use media queries. The new proposal looks much cleaner and very similar to many programming languages. It's not supported by any browser at this moment, it's not even listed on caniuse.com .
Hacker News·4yPico.css • Minimal CSS Framework for semantic HTML
Large and complex CSS file increase memory usage and cause longer style calculations. A great design should be minimal, fast and maintainable. Most popular CSS frameworks are bulky, overkill and hard to customize. Huge stackings of wrappers and CSS classes are unnecessary for semantics elements.
DevDojo·4y15 awesome CSS animation libraries you need to know.
CSS animations provide three major advantages over traditional script-driven animation techniques. They're simple to use for simple animations; you don't even need to know JavaScript to make them. Even with moderate system load, the animations work well. Transitions from one CSS style configuration to another can be animated using CSS animations.
Honeypot·4y5 Reasons To Use UI Libraries to Style React Apps
Use UI libraries to style React apps to build the MVP quickly and grab the bits and pieces of the UI components to deliver a beautiful website in 2 days. There are lots of amazing libraries from Material UI, Semantic UI, Chakra UI to React Bootstrap. Using UI libraries saves you lots of potential code which could be written to make your app look good.
DEV·4yKickass VS Code Extensions To Make Your Life Easy
These extensions can drastically improve your workflow and make your IDE more attractive. Here is a list of some of the extensions that could be useful for primarily front-end developers who want to get the most out of their VS Code. Live Server: A live reload feature reflected on a local server with whatever it is you’re coding.
DevDojo·4yFlowbite - Tailwind CSS components
Flowbite is an open source component library built with Tailwind CSS. It features commonly used elements such as buttons, modals, dropdowns, and even plugins, such as datepickers. It is supposed to help you build websites faster by having a set of web components to work with.
DevDojo·4yNextJS+Typescript and Tailwind: A match made in heaven
Next.js is a React framework with features like hybrid static and server rendering, TypeScript support, smart bundling, route pre-fetching, and more. Tailwind CSS is a utility-first CSS framework that is being used to create markup-based designs. In this tutorial, we'll learn how to build up Next.js with TypeScript and TailwindCSS.
Hashnode·4yHow I made $10,000 revenue in one month with my first info product
Kent Clothier made $10,000 from his first eBook in one month. It took him 8 months of inconsistent tweeting to get to 1,500 followers. He followed his mentor's advice to build a Twitter network on the same day he met his mentor again. He is currently working on his second eBook.
Hashnode·4yEasy ways to center a div
Using CSS Grid and Flexbox, we can center a .div using margin:auto in our flex item. Using the position property requires a few more lines of code, but don't worry! It's still an easy way. We first need to set the position of our parent element to relative, followed by our child element position to absolute.
DEV·4yCSS Hamburger Menu Icons
I created some hamburger menu icon animations using CSS. Since there are a few designs, I created a collection in this codepen collection. A few pens from the collected is linked below. Take a look, I just used CSS, to mimic the use of checkbox effect I used JavaScript.
Sara Soueidan·4yThe CSS prefers-color-scheme user query and order of preference
Scott O’Hara’s article about using JavaScript to detect high contrast and dark modes includes a small, very useful script to do exactly what the title says. The script will detect if you currently have high contrast mode or dark mode enabled, and will output the result. The output of that script at first looked like it was a “false positive”
LogRocket·4yPurgeCSS: Remove unused CSS code
Unused code can result in a larger file size, harm performance, make it easy to lose track of each item, and cause optimization problems. Removing unnecessary code will make your website load faster because the browser will request and parse less code. In this tutorial, we’ll explore PurgeCSS, a tool for removing unused CSS code.
DevDojo·4yHow to become a web developer in 2022, with coach Gandalf
In this blog post, I'll be discussing why you shouldn't trust on new year's resolutions, how overrated motivation is, and tools to help you succeed in the path of learning web development. I will ask coach Gandalf for his opinions on different topics and he will pour his wisdom and bluntness over us during the whole post.
DEV·4yBox shadow vs. drop shadow in CSS
We can use box-shadow to add shadows to our HTML elements. But did you know that we can achieve the same using drop-shadow filter. You simply have to pass the shadow value in the drop- shadow function. If we were to add box-Shadow on a PNG image you will see the shape of box- shadow is rectangular/box.
Laravel News·4yTailwind CSS V3 Is Now Released
Tailwind CSS v3.0 is the most significant release yet. This major version brings impressive performance gains, workflow improvements, and a massive list of features. An in-depth look at what's new in Tailwind v3 by Simon Vrachliotis gets you up to speed on all the new features.
DEV·4yOne-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript
Carrotsuite-admin-ui is a CRM admin dashboard built with pure HTML5, CSS3 and JavaScript. The complete code is online and it is entirely free both for private and commercial use. The admin dashboard has, among others, the following features:Clean and responsive design.Subtle animations with pure CSS3.
CSS {IRL}·4y:has() Has Landed in Safari
Safari Technology Preview includes support for the :has() pseudo-class. It allows us to style an element based on its descendants. Bramus uses it in his post to show or hide a warning message. He’s also experimenting with form styling, including styling labels based on the validity of their inputs.
DZone·4yHow to do Deletion Animations with CSS
In this quick tutorial we're going to be looking at a bunch of different 'delete' styles to use on your next project. Below are a set of delete animations which all work on similar principles. To start the animation, simply click the cross button in each card below.
DEV·4yCSS Hover Effects
Hover Effects Using CSS For Beginners by Kiran Raj R. All the animations are included in this codepen collection. All these are experimental, accessibility is not consider as these are not developed keeping production scenario in mind. I would like to have your feedback to these effects.
