Taskpaper insert separator1/8/2024 ![]() The Status shelf gains markdown live exports, tag emojis, and other enhancements. Numerous list, mind map, stack, and table enhancements. Improved support for exporting figures, idea spaces, and projects as plain text or rich text with images. ![]() New OmniOutliner Pro, Taskpaper, and OneNote integrations.Įxtensive figure meta import and export support. Search now supports boolean and regular expressions, plus numerous other search-related improvements. New export PDF functionality including automatic generation of PDF table of contents outlines, plus clickable PDF links for weblinks, figure actions, idea space links, jump actions, and much more. Modernized toolbar and key interface improvements.Įxtensive new markdown functionality with support for markdown syntax during editing, master markdown styles, and automatic generation of markdown during export, including full project exports as markdown, as well as markdown import. There are many different ways to apply dividers to layouts, and many different approaches you can take, this is just one of those options.Curio 12 is packed with incredible new productivity enhancements: As a result it’s important to know what selectors are available and how to apply them! Pseudo-class selectors are among my favourite aspects of CSS and is often largely forgotten about by developers. There are a lot of useful selectors, and combining them allows you to be quite specific and targeted. ![]() It doesn’t really matter how you write your CSS, whether it’s with CSS-in-JS, a preprocessor, post-css or straight up awesome CSS. This means the same component can render a 4 column, 3 column or 2 column list of cards. Instead we make use of the flexibility of CSS-in-JS to output the CSS we need using the values from our props. Essentially the CSS is the same so having to maintain and manage multiple versions seemed unnecessary. We set it up this way so that we only had to define one component that would work in a number of scenarios. (This is one of our older collections, so it currently uses Flexbox).Īs mentioned this collection has the ability to set a different number of columns at different breakpoints using props that we pass in when we set up the collection in our page routes. ![]() One of our collections allows us an infinite number of articles and accepts a value for how many cards we want per row, we’ll use this as the example because it will cover a few scenarios. At this stage neither Flexbox or CSS Grid provide an easy way to create dividers between content, for the sake of consistency I focused on approaches that would work with both Flexbox and CSS Grid layouts. Our aim is to eventually move completely to CSS Grid but in the mean time we support both. We are currently using either Flexbox or CSS Grid to create “collections” of articles. The examples will use Emotion, but the selectors can be converted to CSS, Sass or whatever method you use for styling. Our site uses React on the front end with Emotion (CSS-in-JS library) for styles. The TL DR is to combine :not & :nth-child with a pseudo-element and props which define the number of columns you need. As a result we needed dividers to separate the articles on the page (otherwise they all ran into each other - it was bad). Over the holiday period we did some experimentation to remove the blocky cards on our website and replace it with a solid background. Adding separators to layouts with CSS-in-JS
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |