Font Map · An AI Experiment by IDEO Layouts – Pure Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for certain menu interactions). Responsive Side Menu A layout example with a side menu that hides on mobile, just like the Pure website. ViewSource Responsive Horizontal-to-Vertical Menu A set of horizontal menus that switch to vertical and which hide at small window widths. ViewSource Responsive Horizontal-to-Scrollable Menu Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed. base ViewSource
IE NetRenderer - Internet Explorer Compatibility Check - How to Replace Text with CSS pseudo-elements :before/:after Replacing text with CSS is not something I use often, but there are some specific cases where it comes in handy. If you have the ability to change text on the server-side, I always recommend that first. CSS text replacement should be a last resort, as that is not what CSS is intended for. If you’re working within the limitations of a CMS, or you don’t have the ability to change your markup, CSS text replacement might be your only option. There are a few ways to handle it. NOTE: In all of the following examples, you could use either pseudo-element, :before or :after. Text Replacement with Pseudo-elements & CSS Visibility A good argument can be made that this is the best method. Here’s some HTML: <p class="replaced">Original Text</p> You want to replace “Original Text” with different content. Giving visibility a value of hidden hides an element, but leaves space where it would have been. Text Replacement with Pseudo-elements & CSS Display <p class="replaced"><span>Original Text</span></p>
Embed CanIUse Tables Into Your Website with This Tool Every developer should know about CanIUse. It’s an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they’re adopted by the W3C. It also explains which browsers currently support these features to help you decide if they’re worth using. Recommended Reading: How to Check Browser Compatibility via Command Lines Well, now you can embed data straight from the CanIUse website with this unofficial embed tool. It’s completely free and works really well. All CSS3 attributes, selectors, and statements are supported. Everything is pulled straight from the CanIUse website, so it’s robust and incredibly accurate. The only thing you need to get started is this script that you can download locally or add to your site from that CDN link. I’ve seen these CanIUse tables added to dozens of web design & development blogs around the web. I mostly appreciate this embed tool for the detailed value and quality craftsmanship.
Using Slack To Monitor Your App Colormind - the smart color palette generator CIRCULUS.SVG — The SVG Circular Menu Generator So you've picked your menu style and downloaded an all-new SVG menu. What then? Here is everything you need to know to customize your menu and embed it in your page. Dissecting The Code The code generated by the above generator is straightforward and—if you are familiar with SVG—fairly simple to customize. Before we get into adding your own icons, let's first get a quick overview of how the generated code is structured. Okay that looks like a lot. The style element contains the default styles. Adding Your Icons As mentioned in the previous section, all you need to do is copy your icon's content into the <symbol>s and, if you want, add or change any class names and IDs. After adding your icons, you reference each one in the <use> elements inside the items. Most icons usually come in square sizes, so the viewBox and use dimensions are square as well by default. If your icon is a square, you can keep or change the codeviewBox value. And the code for the above example is: Styling The Menu