recentpopularlog in

spaceninja : cssbasics   173

« earlier  
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid
It can be difficult to achieve complex yet flexible and responsive grid layouts. Various techniques have evolved over the years but most, such as faux columns, were hacks rather than robust design options.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  flexbox  floats  progressive  enhancement 
4 days ago by spaceninja
Customise radio buttons without compromising accessibility
Today, we’re going to cover the different methods of hiding input elements, their effects on accessibility and how to ensure they remain navigable via keyboard after being styled. There will also be a small bonus section on layout, because after making our radio buttons pretty, we want them to go into the right place.
fridayfrontend  css  cssbasics  accessibility  forms  radio 
4 days ago by spaceninja
Creating sliding effects using sticky positioning
Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!
fridayfrontend  css  cssbasics  position  sticky 
4 days ago by spaceninja
CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS
In this article, we’ll look at two methodologies for naming things in CSS. Both methods were created to improve the development process for large sites and large teams; however, they work just as well for teams of one. Whether you choose one or the other, neither, or a mix of both is up to you. The point of introducing them is to help you to think through approaches for writing your own CSS.
fridayfrontend  css  cssbasics  bem  atomic 
4 days ago by spaceninja
Updating a CSS Variable with JavaScript
You can update a CSS Variable using the JavaScript setProperty method.
fridayfrontend  javascript  cssbasics  css  customproperties  variables  setproperty 
4 days ago by spaceninja
CSS Quick Tip: Using Outline
The outline property in CSS is an interesting and rarely used one. We met with it in almost every project through the browser’s native focus state formatting but nothing more.
fridayfrontend  css  cssbasics  outline 
4 days ago by spaceninja
CSS specificity and the cascade
A recent Twitter poll has caused a bit of a storm and there’s something important to take away from it: there’s a gap in some folk’s CSS skillsets, so I’ll try to help y’all fill it in. Let’s not dwell on on the hot drama and instead, dive in and have some fun by learning.
fridayfrontend  css  cssbasics  cascade  specificity 
4 days ago by spaceninja
Create your design system, part 6: Buttons
Buttons are the most important interactive components used by the users to perform actions. Designing buttons means creating a toolkit that allows interaction with an interface. In this final article of our series on design systems, we’ll take a look at how to design a system of buttons in CSS.
fridayfrontend  css  cssbasics  design  designsystem  styleguide  patternlibrary  buttons 
11 days ago by spaceninja
Describing aria-describedby
When building inclusive experiences, developers may need to look beyond the native accessibility of HTML elements and use ARIA attributes to augment the semantics of the HTML language. One such ARIA attribute, aria-describedby, provides the means to associate an element with the text of another object, or objects, in the document. When properly used, this attribute can provide the necessary information to assist in creating inclusive user experiences.
fridayfrontend  cssbasics  aria  accessibility  aria-describedby 
11 days ago by spaceninja
Not the css specificity guide you deserve, but the one you need right now.
fridayfrontend  css  cssbasics  specificity  batman 
11 days ago by spaceninja
How to use Media Queries in JavaScript with matchMedia
When it was first introduced, responsive design was one of the most exciting web layout concepts since CSS replaced tables. The underlying technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets. If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript, as this article will explain.
fridayfrontend  css  cssbasics  javascript  mediaqueries  matchmedia 
11 days ago by spaceninja
Accessible Breadcrumb Navigation
Examples of a breadcrumb navigation using aria-label to provide an accessible name, and aria-current to indicate the currently active link.
fridayfrontend  css  cssbasics  html  accessibility  breadcrumbs  navigation  aria 
11 days ago by spaceninja
Don’t use “click here”
Using vague and uninformative phrasing for hyperlinks will have several adverse effects on your website: Decrease in overall usability; Decrease in overall accessibility; Decrease in search engine performance and content find-ability. These are huge issues, so I’ll address them individually before providing better options.
fridayfrontend  cssbasics  html  accessibility  usability 
11 days ago by spaceninja
Heading structures are tables of contents
The heading structure of a web page is like its table of contents. It gives people who can’t see your page a way to navigate it without reading everything.
fridayfrontend  html  cssbasics  accessibility  headers 
11 days ago by spaceninja
Create your design system, part 5: Icons
In this article, we’ll take a look at how to include icons in your design system, with some additional CSS techniques to customize them according to your needs.
fridayfrontend  css  cssbasics  design  designsystem  styleguide  patternlibrary  icons  svg 
11 days ago by spaceninja
Is placeholder text a sufficient accessible label for form fields
In a mobile first world many websites use placeholder text to save space. Let's test to see if its a good idea.
fridayfrontend  css  cssbasics  html  accessibility  forms  placeholders  labels 
11 days ago by spaceninja
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)
This is the second part in a series on enhancing mobile forms for users. In the first part, we saw some general guidelines on how to improve form readability for mobile users, label placement and size, interaction cost and dealing with errors.
fridayfrontend  css  cssbasics  html  forms  mobile  ux  accessibility 
11 days ago by spaceninja
Semantic HTML Sketchnote
If you’ve ever been confused when folks use the term “semantic HTML”, I hope this #sketchnote helps clear it up.
fridayfrontend  css  cssbasics  html  semantics 
11 days ago by spaceninja
Designing A Textbox, Unabridged
Building websites is hard. Let’s explore the creation of a component from start to finish, in the context of an exaggerated reality where projects aren’t flawless.
fridayfrontend  css  cssbasics  forms  textarea  inputs  design  html 
11 days ago by spaceninja
Create your design system, part 4: Spacing
In this article we’ll take a look at how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.
fridayfrontend  css  cssbasics  design  spacing  margins  padding  layout  variables  customproperties  designsystem  styleguide  patternlibrary 
11 days ago by spaceninja
The details and summary elements
The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget. You may think of disclosure widgets by other names, but they’re most commonly recognized within the context of an accordion component. An accordion is comprised of various disclosure widgets that are often aware of each other’s current state.
fridayfrontend  cssbasics  html  details  summary  accordions 
17 days ago by spaceninja
Best Practices For Mobile Form Design
Users can be hesitant to fill out forms. That is why it is our goal as designers to make the process of filling out a form as easy as possible. Nick shares some techniques that can help you design effective forms.
fridayfrontend  cssbasics  css  html  forms  mobile  accessibility 
17 days ago by spaceninja
7 Ways To Make Your Web Application More Accessible
Yet accessibility isn’t just about providing a way for people with disabilities to access your content. Writing accessible code also has positive implications on web app performance or SEO rankings. Thus, let’s delve into the seven ways you can make your web app more accessible. (I promise, it’s easy).
fridayfrontend  cssbasics  accessibility  mobile  semantics  keyboard  aria  tables  alt  color  contrast  typography 
17 days ago by spaceninja
Defining Colors in CSS
CSS is a styling language, and the color – or the other properties which gets a color value – is one of its most basic features. Setting colors is general in any design.
fridayfrontend  css  cssbasics  color  hsl  rgba 
17 days ago by spaceninja
The power of progressive enhancement
It’s become much more successful than I ever imagined, but why? This wasn’t a particularly new idea. Similar products and websites exist, so what is it that made My Browser different? I believe the answer is progressive enhancement. I took a gamble when I changed up my build approach, and I’m very happy I did.
fridayfrontend  cssbasics  progressive  enhancement  javascript  css 
17 days ago by spaceninja
Common Responsive Layouts with CSS Grid (and some without!)
When I was learning CSS and HTML the way that I learnt best was by copying layouts written by others and then changing bits, deleting bits and playing around with them until I understood what was going on. With that in mind, I’ve composed a few common responsive website layouts for you to copy, edit, mess around with. I’ll go over my thinking with each layout and will outline a few tricks from each one.
fridayfrontend  cssbasics  css  grids  layout  cssgrid  responsive 
17 days ago by spaceninja
How do you mark up an accordion?
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some validation for the way I always have built them. The discussion was too interesting to not summarize in an article. The different possible markup approaches as well as useful resources are discussed below.
fridayfrontend  cssbasics  css  html  accordions  lists  ul  ol  dl  summary  details  accessibility 
17 days ago by spaceninja
Interactive Flex Generator
Welcome to free online CSS flex (flexbox) layout editor and css, html source code generator tool. It was written in JavaScript, and created for those who want to learn css flex, or at least see how it works in action without having to write any code.
fridayfrontend  cssbasics  css  flexbox  grids  layout  generator 
17 days ago by spaceninja
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1)
Do you test your forms on real users and real devices? If not, you should. Let’s take a look at some of the techniques that can help you take your forms to the next level and help users fill them in.
fridayfrontend  css  cssbasics  forms  html  mobile  accessibility  ux 
26 days ago by spaceninja
CSS Layout Templates From CodePen
So if you want to get started and build a layout, a great place for examples is CodePen. Bellow you will find a list I put together with some of the best CSS layouts templates you can find there.
fridayfrontend  css  cssbasics  layout  flexbox  cssgrid  grids 
26 days ago by spaceninja
::before vs :before
Note the double-colon `::before` versus the single-colon `:before`. Which one is correct? Technically, the correct answer is `::before`. But that doesn't mean you should automatically use it.
fridayfrontend  css  cssbasics  selectors  generated  before  pseudo-classes  pseudo-elements 
26 days ago by spaceninja
Twitter's "fave" animation
Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function.
fridayfrontend  css  cssbasics  animation  twitter 
26 days ago by spaceninja
Using feature detection to write CSS with cross-browser support
Why do we need CSS feature detection at all? What are good (and not so good) ways to do feature detection? What does the future hold for CSS feature detection?
fridayfrontend  css  cssbasics  supports  featurequeries  modernizr 
26 days ago by spaceninja
Understanding why Semantic HTML is important, as told by TypeScript.
With the increasing focus on JavaScript in Front End Development and the seemingly increasing devaluing of HTML I recently spent some time trying to figure out how to explain to JavaScript orientated developers why understanding and learning HTML was important.
fridayfrontend  cssbasics  html  semantics  typescript  javascript 
26 days ago by spaceninja
Time-saving CSS techniques to create responsive images
As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours. This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.
fridayfrontend  css  cssbasics  responsive  images  object-fit 
26 days ago by spaceninja
Hamburger Menu Animations
Four different menu animations for menu button toggle between hamburger, cross and back icon.
fridayfrontend  css  cssbasics  hamburger  icons  animation 
4 weeks ago by spaceninja
Front-End Performance Checklist
Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).
fridayfrontend  css  cssbasics  performance  checklist 
4 weeks ago by spaceninja
Exploring SMACSS: Scalable and Modular Architecture for CSS
Now, the architectural approach of SMACSS is a bit different from a CSS framework like Bootstrap or Foundation. Instead, it’s a set of rules, more like a template or guide. So let’s dive into some CSS design patterns to find out how we can use them to make our code better, cleaner, easier to read, and more modular.
fridayfrontend  css  cssbasics  smacss  frameworks  modular 
4 weeks ago by spaceninja
A Friendly Introduction to Flexbox for Beginners
In recent years, CSS layout has come of age, with dedicated tools for complex layouts replacing the various workarounds of using tables, floating, absolute positioning and so on. Flexbox (or the Flexible Box Layout Module) was the first of these dedicated layout modules, followed by CSS Grid Layout. In this article, we provide a user-friendly introduction to flexbox.
fridayfrontend  css  cssbasics  flexbox  grids  layout 
4 weeks ago by spaceninja
Hex Naw | A color accessibility tool for designers and developers.
Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest. Happy testing!
fridayfrontend  css  cssbasics  color  accessibility  contrast 
4 weeks ago by spaceninja
On Switching from HEX & RGB to HSL
In the context of the tweet I mentioned that I had converted all the colors on my site from the Hexadecimal and RGB(A) formats to the HSL format. A bunch of folks asked me why I made this switch. This article is my response.
fridayfrontend  cssbasics  hex  color  rgb  hsl  css 
4 weeks ago by spaceninja
FLEX: A simple visual cheatsheet for flexbox
Learn all about the properties available in flexbox through simple visual examples.
fridayfrontend  cssbasics  grids  flexbox  layout  cheatsheet 
4 weeks ago by spaceninja
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
fridayfrontend  cssbasics  grids  cssgrid  layout  cheatsheet 
4 weeks ago by spaceninja
Element Hiding Techniques in CSS
Hiding HTML elements from CSS is not a big deal; we do it instinctively until we learn accessibility and find a fundamental difference.
fridayfrontend  accessibility  cssbasics  hidden  display  visibility  opacity  screenreaders  position  clip-path 
4 weeks ago by spaceninja
Westworld Slider
I just finished the first season of Westworld and I just loved the UI design of the computer systems - relevant, balanced and unfussy, the designer(s) seem to fully understand the systems they aim to represent. Westworld Slider is inspired by the 'personality matrix'.
fridayfrontend  css  cssbasics  forms  westworld  scifi  television 
4 weeks ago by spaceninja
Everything You Need To Know About Alignment In Flexbox
In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.
css  cssbasics  flexbox  alignment  fridayfrontend 
4 weeks ago by spaceninja
The Web is Made of Edge Cases
People will use your site how they want, and according to their means. That is wonderful, and why the Web was built.
css  cssbasics  accessibility  performance  fridayfrontend 
5 weeks ago by spaceninja
Toggle-Switch Guidelines
Toggle switches are digital on/off switches. They prompt users to choose between two mutually exclusive options and always have a default value. Toggles should provide immediate results, giving users the freedom to control their preferences as needed.
css  cssbasics  forms  html  toggles  checkboxes  radio  accessibility  fridayfrontend 
5 weeks ago by spaceninja
CSS Filter Playground
Filters are a great way of graphically modifying an element. You can blur an image, make an image grey-scale or change its brightness. This is an interactive playground on all of the possible filter functions that can be used.
css  cssbasics  filters  fridayfrontend 
5 weeks ago by spaceninja
6 Awesome Ways to Take A Screenshot of your Code
Code Screenshots are important for a bunch of reason. Here are 6 awesome ways to take a screenshot of your code.
css  cssbasics  code  screenshots  carbon  fridayfrontend  terminal  syntax  highlight  color  codezen  generator 
5 weeks ago by spaceninja
Making Legacy Sites More Performant with Modern Front-End Techniques
Front-end website performance is a constantly moving target but is critical to the overall speed of your site. Best practices evolve constantly. Also, modern browsers bring constant updates to performance techniques and tools needed to identify problems and optimize rendering. These optimizations don’t have to be difficult, and can typically be done in hours.
css  cssbasics  performance  preload  javascript  sass  refactoring  maintainability  fridayfrontend 
6 weeks ago by spaceninja
How to get better at writing CSS
I have a purpose today: to make you better at writing CSS. I want you to take a look at your older projects and think : oh boy, how could I ever write something like this?
css  cssbasics  sass  maintainability  bem  architecture  fridayfrontend 
6 weeks ago by spaceninja
Creating Animated Radial Progress Bars with SVG, CSS and VueJS
There are many ways you can make Radial Progress Bars but I find the easiest is to draw them with SVGs and use Vue (or any other JavaScript libraries) to animate them.
css  cssbasics  vue  javascript  svg  radial  progress  animation  loaders  fridayfrontend 
6 weeks ago by spaceninja
Did you know that style and script tags can be set to display: block?
The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.
css  cssbasics  style  script  display  block  fridayfrontend 
6 weeks ago by spaceninja
Speed up alignment in CSS with Flexbox utility classes
Aligning things in CSS has always been a nightmare (yes, I like drama). Then Flexbox came and with it the possibility to align items in a way that makes sense! In this article, I’m going to share a set of CSS utility classes based on Flexbox that can be used to align things in no time!
css  cssbasics  flexbox  alignment  fridayfrontend 
6 weeks ago by spaceninja
What Happens When You Create A Flexbox Flex Container?
In my ideal world, CSS Grid and Flexbox would have arrived together, fully formed to make up a layout system for the web. Instead, however, we got Flexbox first and, due to it being better at creating grid-type layouts than floats, we ended up with a lot of Flexbox-based grid systems. In fact, many of the places where people find Flexbox difficult or confusing are really due to this attempt to make it a method for grid layout.
css  cssbasics  flexbox  layout  grids  fridayfrontend 
6 weeks ago by spaceninja
Supporting users who change colours on GOV.UK - Accessibility
We’ve researched and spoken before on the Accessibility blog about how and why users change colours on websites and some of the issues teams need to think about.

On the Design System team we aim to make any components in GOV.UK Frontend as accessible as possible, so we took our previous research and tried to improve the latest version.

I’ve picked out a few examples below to demonstrate some of the improvements that have been made.
css  cssbasics  accessibility  color  fridayfrontend 
6 weeks ago by spaceninja
The trick to viewport units on mobile
Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.
css  cssbasics  viewport  units  javascript  fridayfrontend 
6 weeks ago by spaceninja
Nutrition Cards for Accessible Components A11Y Expectations
A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
css  cssbasics  aria  accessibility  fridayfrontend 
6 weeks ago by spaceninja
Flexbox — The Animated Tutorial
In my previous tutorial I dumped all of the flex diagrams in one place to show you flex box bird’s eye view — but it’s not enough. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex I created these animated samples.
css  cssbasics  flexbox  grids  layout  animation  fridayfrontend 
6 weeks ago by spaceninja
Versatile CSS-Only Ripple Effects with Progressive JS Enhancement
Achieve simple lightweight material-design ripple effects using only background properties and css animations, with tutorial and examples.
css  cssbasics  javascript  buttons  ripple  animation  google  fridayfrontend 
7 weeks ago by spaceninja Navigation in CSS and jQuery
A few weeks ago launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes.
css  cssbasics  javascript  jquery  stripe  design  dropdown  navigation  fridayfrontend 
7 weeks ago by spaceninja
My Top 8 Visual Studio Code Tips and Features
Visual Studio Code is a good Editor, that can adapt to many languages and technologies out there, and discovering these little helpers can sometimes take time.
css  cssbasics  vscode  editors  tips  code  fridayfrontend 
7 weeks ago by spaceninja
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in CSS.
css  cssbasics  typography  styleguide  designsystem  design  fridayfrontend 
7 weeks ago by spaceninja
The peculiar magic of flexbox and auto margins
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.
css  cssbasics  flexbox  layout  grids  margins  auto  fridayfrontend 
7 weeks ago by spaceninja
Create the Google Button Effect with CSS
The button is flat (it looks like a link) but the animated background effect is so simple and elegant that I can't even explain the feeling; it's almost as though the effect is less "heavy" than a simple text-decoration change.  Let's examine the CSS to make the effect happen!
css  cssbasics  google  buttons  design  animation  fridayfrontend 
7 weeks ago by spaceninja
3 Essential Front-End Checklists for Web Developers
Ensure your web applications are air tight and high quality with these open source checklists covering engineering, design, and performance
css  cssbasics  frontend  checklist  design  performance  fridayfrontend 
7 weeks ago by spaceninja
4 CSS tricks I’ve learnt the hard way
1) No borders; 2) Animated throbber; 3) Horizontal & vertical centering; 4) Positioning relative to a parent;
css  cssbasics  borders  animation  centered  position  fridayfrontend 
7 weeks ago by spaceninja
CSS Quick Tip: The Difference Between Pseudo-class and Pseudo-element
Using pseudo-class and the pseudo-element we can manage virtual states and element. These two can be essential and helpful when we style our elements in CSS.
css  cssbasics  pseudo-classes  pseudo-elements  fridayfrontend 
7 weeks ago by spaceninja
Developer Roadmaps
The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just be valuable. Three different writer/developers have taken a crack at it this year and their results have been extraordinarily popular. Let's take a look.
css  cssbasics  frontend  roadmaps  development  developers  fridayfrontend 
7 weeks ago by spaceninja
Text Editing Tips And Tricks Roundup
We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we’ve decided to collect them all into one article so you can add it to your useful bookmarks. Thanks to everyone who took the time to reply and share their best-appreciated tools and techniques — we sincerely appreciate it!
css  cssbasics  tips  editors  shortcuts  vscode  sublime  emmet  prettier  code  fridayfrontend 
7 weeks ago by spaceninja
The Complete Illustrated Flexbox Tutorial
When I started to learn Flexbox, I wanted to see everything it was capable of. But, I wasn’t able to find a thorough tutorial showing examples of all Flex properties. So, I created these diagrams with Flex to provide a bird’s eye view.
css  cssbasics  grids  flexbox  layout  diagrams  fridayfrontend 
7 weeks ago by spaceninja
30+ CSS Radio Button Styles From CodePen 2018
When trying to go with a specific radio button style, one of my favourite places that visit is CodePen. So here’s a list of CSS radio buttons I put together to get you started.
css  cssbasics  radio  forms  checkboxes  inputs  design  fridayfrontend 
8 weeks ago by spaceninja
CSS Quick Tip: The Valid Characters in a Custom CSS Selector
Using valid CSS selectors is easy, and usually, we initially know how to write one. Surely we can’t make mistakes selecting elements – because the naming cames from HTML – but what about the custom class or ID ones?
css  cssbasics  selectors  validation  class  fridayfrontend 
8 weeks ago by spaceninja
8 Digit Hex Colors
While I loved the ability to provide an opacity with color using rgba(), the use of hexadecimal color had always been ingrained in me, which made the sudden need for rgba conversions annoying.  Luckily these days we have 8 digit hex values with allow us to cite an opacity level as the last two characters of the hex value!
css  cssbasics  hex  color  rgba  fridayfrontend 
8 weeks ago by spaceninja
Designing for accessibility is not that hard
Seven easy-to-implement guidelines to design a more accessible web
css  cssbasics  accessibility  design  fridayfrontend 
8 weeks ago by spaceninja
CSS grid in Internet Explorer 11
My response was blunter. I said I just don’t consider IE11 as a browser that supports grid.
css  cssbasics  grids  layout  cssgrid  ie11  fridayfrontend 
9 weeks ago by spaceninja
On Leading and Trailing Spaces in HTML Attribute Values
In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):
css  cssbasics  space  selectors  attributes  html  javascript  fridayfrontend 
9 weeks ago by spaceninja
Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference
There are other ways to do this. You could use longhand CSS properties. You could name the areas. But say you like doing it this way because it is succinct or whatever. That's where the ASCII is useful! Leave it in a CSS comment and number the lines.
css  cssbasics  grids  cssgrid  layout  comments  ascii  fridayfrontend 
9 weeks ago by spaceninja
Clearfix: A Lesson in Web Development Evolution
The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be.
css  cssbasics  clearfix  hacks  history  fridayfrontend 
10 weeks ago by spaceninja
« earlier      
per page:    204080120160

Copy this bookmark:

to read