All posts with the tag "css"
Extract text from MDX files, removing J…
Damn this one is getting some reach, I’ve seen it from Simon Willison and Justin Searls and t3.gg. I feel for Adam, He has built a fantastic product that the world is running with, something we all needed. Something that everyone laughs at turns their nose up “ppft I don’t need that” the first time they see it, but once they try people get it, and a lot of them like it...
...
css if() just landed, I’m struggling to understand what I an do with this that I can’t do with something as old as classes. I can get it if I don’t have control over html creation or js to add classes. The example that Una shows includes data that could directly be a classname with a set of styles in css rather than this crazy css variable unpacking out of a data attribute and an if statement.
How to make an entire clickable without presenting the entire content of the card as the link title. These videos are great, I’ve ran into these types of problems so many times, and definitely did not know about things like isolate to keep the z-index scoped to one element.
Css is getting so good, new things like interpolate-size are making things that use to require some deep expertise and hacks intuitive and easy.
Reminder to tune in later, can’t watch now, but saw a link on Dave’s blog.
These css anchors are crazy that you can do this with html and not a bunch of js, probably requiring a library or framework.
This is a pretty incredible use of css grid to overlay items overtop of each other without needing to resort to position: absolute and the side effects that it brings.
svgbackgrounds is a really awesome resource for svg things recently featured on https://shoptalkshow.com/618/
Tailwind calls strikethrough line-through. This caught me off guard and took me a minute to find.
Control how text is decorated with the underline, no-underline, and line-through utilities.
I’m going to give this trick a shot on my sites, and see how I like it.
* { min-width: 0 }
Down in the comments @adamwathan goes on to say.
Basically every layout overflow bug ever boils down to some flex or grid child needing min-width: 0 😄
Oh and @ryanflorence also says in the comments.
...
Get those print colors exact
I’m working on something that might go to print, so I want the page breaks to happen somewhat in my control as the content author. As I do my writing I break my content up in to many short sections using h2, sometimes an h3. These are generally short sections that go together, should stay together, and typically are not too lengthy to cause a large white space in print.
I found a way in css to only allow page breaks to happen on h2 and h3, and it turned out perfect, suck it WSIWIG editors
Tailwind comes with space that I have never heard of that is made to give margin and padding together in one class. Adam dropped it here in the Tailwind Connect conference.
Controlling overflow with tailwindcss
Default scrollbars on a dark theme website are just the ugliest thing. This page covers all the pseudo selectors needed to style the scrollbar.
All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode
This snippet from CSS tricks has fixed all the different states for me to give me full control.
Tailwind css component library. There are many examples with copy and pastabily with the tailwind classes already setup.
A nice searchable cheatsheet for tailwindcss classes.
Nice intro into tailwind, I definitely started grasping some of the concepts after watching Brad.
A nice codepen reference for dark forms. I am using it for my thoughts chrome extension.
Next time I’m working with large headers on small screens I need to try this. I always truggle to get them to look good for most text and overflow ridiculously long words correctly or at all.