Color in Design Systems — EightShapes LLC Contrast & Accessibility Solving for accessible color contrast should a core practice of setting up any digital color system from the get go. However, design can be tumultuous place, and teams can lose sometimes. A systems team can engrain accessible practices into a workflow to provoke and spread values in accessibility broadly across an enterprise. #13. It happens often: a few weeks or days before a product — or design system — launch, finally somebody notices. Takeaway: Any system designer responsible for color must be familiar with WCAG 2.0 rules, have a tool (like Tanaguru) to test color pairs, and incorporate the practice into color selection. Learn CSS Grid | Jen Simmons People are starting to ask: where can I learn about CSS Grid? There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her. So here are the links to resources I recommend. There will be much more coming from Rachel, Jing and me this year. I am starting to see a bunch of simple introductions, link-baity false-narratives, and weirdly-wrong ideas to creep into the conversation about CSS Grid. If you see any new resources that are good, do let me know!
GitHub - bendc/frontend-guidelines: Some HTML, CSS and JS best practices. CSS Grid Layout - a Collection by Stacy on CodePen Not so Spooky Pumpkin Facts Not so Spooky Pumpkin Facts Stacy Pro 1,677 Views 4 Comments CSS Grid Layout - responsive gallery demo Responsive CSS grid layout without needing media queries, setting minmax and auto rows. CSS Grid Layout - responsive gallery demo 7,975 Views 0 Comments CSS Grid Layout - Blog Post Template Using CSS Grid Layout, with a flexbox fallback, in a practical sample template. CSS Grid Layout - Blog Post Template 8,199 Views 0 Comments CSS Grid Layout - grid auto flow Responsive grid layout without needing media queries, setting minmax and auto rows. CSS Grid Layout - grid auto flow 8,588 Views 0 Comments CSS Grid Layout - Bring sample print inspiration to web Work in progress. CSS Grid Layout - Bring sample print inspiration to web 5,225 Views 1 Comments CSS Grid Layout - Grid Template Area Using named grid-template-areas. CSS Grid Layout - Grid Template Area
Completely CSS: Custom checkboxes, radio buttons and select boxes | Kenan Yusuf With a little extra markup, our form elements can be styled in almost any way, and be as accessible as we choose to make them - no JavaScript required. Note: The following tutorial is intended for beginners; if you want to get straight to the point, head to the demo and check out my codepen. Checkboxes and radio buttons First of all, let’s lay out our HTML. In this example, we have four checkboxes: checked, unchecked, disabled and disabled and checked. So if you have ever worked with form elements before, you will be familiar with most of our markup - but maybe not in this order. Now that our structure is laid out, we can start styling our checkboxes/radio buttons. There is nothing clever about the styles above, feel free to customise these as you wish. Note that we are hiding the input with z-index: -1; and opacity: 0; - using display: none; or visibility: hidden; would stop the inputs functioning correctly. Select boxes Moving swiftly on. Demo
Using Feature Queries in CSS – Mozilla Hacks – the Web developer blog There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS. Behold, the @supports rule. With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. (display: grid) { } If the browser understands display: grid, then all of the styling inside the brackets will be applied. Now, there seems to be a bit of confusion about what Feature Queries are for. That said, I’ve found @supports to be incredibly helpful. For years, developers have used Modernizr to do what Feature Queries do — but Modernizr requires JavaScript. You might notice the syntax of a Feature Query is a lot like a Media Query. Now most of the time, you do not need such a test in your CSS. If a browser understands border-radius, then it will put rounded corners on the aside box.
How to Create a CSS3 Mega Drop-Down Menu Topic: CSS3Difficulty: IntermediateEstimated Completion Time: 1 hour Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. HTML Markup Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. Reset and Container Basic Styles As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues. Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line. Styling the Menu Links We will start with the common styles like padding, height, position, etc. For the hover state we will only change the background color. Styling the Search Form The Mega Dropdowns Some Content Download Files