Rebuilding iOS15 with Tailwind CSS
Simon of the Tailwind Labs team, keeps creating cool videos. In this video he recreates the iOS notifications screen.
Posts tagged with css
No, Utility Classes Aren't the Same As Inline Styles
Sarah Dayan throughouhly explains the differences between utility classes and inline styles
Read more [frontstuff.io]
Join thousands of developers
Every two weeks, I share practical tips, tutorials, and behind-the-scenes insights from maintaining 300+ open source packages.
No spam. Unsubscribe anytime. You can also follow me on X.
CSS cascade & specificity
In a new video, Shruti Balasa explains this basic concept of CSS.
No, Utility Classes Aren't the Same As Inline Styles
An excellent post on the subject by Sarah Dayan.
Read more [frontstuff.io]
Self hosting Google Fonts
To self-host, you need to download the fonts and write the appropriate @font-face CSS rules. Instead of doing this myself, Seb came across an excellent tool to streamline this process
Read more [sebastiandedeyne.com]
A JIT compiler for Tailwind CSS
Incredible work by Adam Wathan and his team.
Styling Forms with Tailwind CSS
Here's a very cool video by Simon Vrachliotis on how to style forms with the tailwindcss form plugin.
I could immediately use this knowledge to style some forms on this very blog.
Tailwind CSS: From Zero to Production
In this incredibly well produced course, Tailwind Labs member Simon Vrachliotis teaches you how to get started with Tailwind.
Read more [www.youtube.com]
Compound Colour Utilities with TailwindCSS
– liamhammett.com - submitted by Liam Hammett
An approach you can use to combine multiple tightly coupled utilities together into a new compound utility class.
Read more [liamhammett.com]
Using the details/summary tags in Html
?? Something you probably didn't know HTML/CSS could do. SUPER useful! pic.twitter.com/qNTDTj1Hl1
— Caleb Porzio (@calebporzio) April 29, 2019
Read more [twitter.com]
Keep your assets Prettier on every commit
Sebastian wrote a short post on how to configure Husky to run Prettier on every commit.
I'm a happy prettier user to keep my CSS and JavaScript files consistent. However, it's hard to keep the discipline to run Prettier before every commit. This week I decided to automate the process with Husky and lint-staged.
Read more [sebastiandedeyne.com]
Tools to automatically format PHP, JavaScript and CSS files
When working on a project with other people, it's important to pick a coding standard. A coding standard like PSR-2 in the PHP world specifies rules on where certain characters, like braces of an if statement, or comma's should be put. Agreeing on a coding standard makes the code more readable for…
A few notes about the frontend of the renewed spatie.be
Before we moved in to our new offices in 2014, we quickly set up a temporary one-page website, initially only in Dutch. It lasted for 4 years and bursted out of its frames ever since, because… hmm … no priority, no time. A new site was like a running joke for a long time, until Laracon US 2018…
Build User Interfaces by Composing CSS Utility Classes with Tailwind
Simon Vrachliotis recorded a free Egghead.io video course on the kickass Tailwind CSS framework.
In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes. By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!
https://egghead.io/courses/build-user-interfaces-by-composing-css-utility-classes-with-tailwind
A collection of Tailwind components
Tailwind CSS is a kick-ass utility first CSS framework. Though the documentation contains some nice examples, you might want to some more examples. You'll be happy to know that Agustin Rodríguez created a site with some nice components built by the community.
https://tailwindcomponents.com
Native HTML5 form validation in 6 lines of code
Dave Rupert, lead developer at Paravel, shows how you can leverage native form validation and still style your errors using only a couple of lines of JavaScript.
If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the required attribute to inputs works wonderfully. However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page. I finally sat down and spent a couple days trying to make HTML5 Form Validation work the way I want it.
https://daverupert.com/2017/11/happier-html5-forms/
Reducing the size of a css file
PurgeCSS is a tool that can reduce the filesize of a CSS file. It does this by removing any css classes that are not used. It can detect which CSS classes are used by scanning the source files of your application. In this tweet Jonathan Reinink shared how it can be configured in Laravel Mix: ???? I…
A few different ways to style inputs
? Little details go a long way when styling UI components. Here are a few different ways to style inputs: pic.twitter.com/1D2AYDwi1f
— Steve Schoger (@steveschoger) 18 oktober 2017
Read more [twitter.com]
CSS Utility Classes and "Separation of Concerns"
In my day to day work I don't write any css at all, but I still very much enjoyed this blogpost by Adam Wathan where he shares some interesting things about how css should be structured and he makes the case for using utility classes to make visual tweaks.
When you think about the relationship between HTML and CSS in terms of "separation of concerns", it's very black and white.You either have separation of concerns (good!), or you don't (bad!). This is not the right way to think about HTML and CSS. Instead, think about dependency direction.
...
One of the biggest benefits of using small, composable utilities is that every developer on your team is always choosing values from a fixed set of options.
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
Game & Watch LCD Donkey Kong recreated with HTML and CSS
James Holderness recreated the Donkey Kong Game & Watch without JavaScript. Amazing work.
There are two things I’ve always wanted to try in HTML: generating a photorealistic image using CSS, and creating an interactive game without the need for JavaScript. HTML Kong is the end result of those two ambitions – a reproduction of the Game & Watch video game, Donkey Kong, using just HTML and CSS.For those of you that haven’t heard of it, Game & Watch was a line of LCD handheld video games from the 1980s. The Donkey Kong title was probably one of the most popular in the series, selling more than a million units worldwide. The game was split over two screens and built into a distinctive clamshell casing.
https://www.xn--8ws00zhy3a.com/blog/2016/07/html-kong
If you want to skip reading the making of and go straight to the game, click here.