recentpopularlog in

spaceninja : cssbasics   218

« earlier  
CSS Frameworks Or CSS Grid: What Should I Use For My Project?
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.
fridayfrontend  css  cssbasics  frameworks  grids  cssgrid  layout  bootstrap  foundation 
6 days ago by spaceninja
Simple Named Grid Areas
I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
6 days ago by spaceninja
5 Digital Accessibility Myths Busted | Deque
Are you secretly asking yourself questions like: “How many people visiting my website or app actually need these accessibility features?” “Won’t it take too much time/effort/money to make my website or app accessible?” “Will my website or app be ugly if I make it accessible?” If you or your client have pondered these (or similar) thoughts, I am here to challenge your thinking by busting some myths around digital accessibility!
fridayfrontend  cssbasics  accessibility  myths 
6 days ago by spaceninja
Article Layout with CSS Grid
This code creates three flexible grid columns. The outer columns use minmax(1.2rem, 1fr). This makes these columns a minimum width of 1.2rem and a maxiumum width of 1fr. The inner column for text uses minmax(auto, 57ch). The minimum size of auto makes the column size to the width of the text as it wraps — so it looks great on tiny screens. The maximum size of 57ch makes sure that column never gets bigger than 57 characters, keeping the text from getting too wide and unreadable on huge screens.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
6 days ago by spaceninja
Advanced CSS Theming with Custom Properties and JavaScript
Throughout this tutorial on CSS theming, we’ll be using CSS custom properties (also known as CSS variables) to implement dynamic themes for a simple HTML page. We’ll create dark and light example themes, then write JavaScript to switch between the two when the user clicks a button.
fridayfrontend  css  cssbasics  variables  customproperties  javascript  color  themes  darkmode 
6 days ago by spaceninja
Fun Tip: Use calc() to Change the Height of a Hero Component
The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.
fridayfrontend  css  cssbasics  calc  layout 
6 days ago by spaceninja
Web Performance 101: JS, CSS, HTTP, images & fonts
This is an introduction to the modern web loading performance. Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.
fridayfrontend  cssbasics  performance  javascript  images 
12 days ago by spaceninja
The Web Accessibility Introduction I Wish I Had
This post aims to tell you a few key things about accessibility. I can't cover everything, but I can cover: 1. Why accessibility matters; 2. Making a website accessible; 3. Testing accessibility; Let's begin!
fridayfrontend  cssbasics  accessibility 
12 days ago by spaceninja
Splicing HTML’s DNA With CSS Attribute Selectors
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, we’ll discuss how they operate and give you some ideas about how to use them.
fridayfrontend  cssbasics  attributes  selectors 
12 days ago by spaceninja
Are you accessible?  A Primer on Web Accessibility
In this post I am going to unpack what it means to be accessible on the web. We will cover: 1. The specifications and guidelines for the accessible web. 2. Best practices for website accessibility. 3. An extensive (but not absolute) resource list to get you started.
fridayfrontend  css  cssbasics  accessibility 
19 days ago by spaceninja
The Importance of Heading Levels for Assistive Technology
WebAIM’s 2017 Screen Reader survey tells us that navigating via headings is the most important way people who rely on assistive technology locate information. Because of this, it’s important to craft your website’s headings properly.
fridayfrontend  css  cssbasics  accessibility  headers  headings 
19 days ago by spaceninja
Keys to maintainable CSS: Order
The order I usually advise for is the following (you can set this up in stylelint): 1. Layout: The position of the element in space. Eg.: position, top, z-index. 2. Box: The element itself. Eg.: display, overflow, box-sizing. 3. Visual: Design of the element. Eg.: color, border, background. 4. Type: Typesetting of the element. Eg.: font-family, text-transform.
fridayfrontend  css  cssbasics  order  maintainability 
19 days ago by spaceninja
Creating a simple form with Flexbox
The simplest form on the web contains an email field and a submit button. Sometimes, the email field and the submit button is placed on the same row. This UI looks simple! But it can be difficult to build if you’re using older methods like inline-block. The hard part is getting the email field and button to align visually. The great news is: CSS Grid or Flexbox can help you build this form easily.
fridayfrontend  css  cssbasics  flexbox  layout  grids  forms 
19 days ago by spaceninja
Quick Tip: Use the “lang” Attribute for Better Accessibility
The lang attribute is one of the global HTML attributes developers can apply to any HTML element, and it can really help with accessibility. It allows you to specify the language of an element and all its child elements using a language “subtag”: a 2 or 3 character code defined by an international standards body.
fridayfrontend  css  cssbasics  lang  accessibility 
19 days ago by spaceninja
SVG Marching Ants
Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. Let's break it apart bit by bit and see all the little parts come together.
fridayfrontend  cssbasics  svg  animation 
26 days ago by spaceninja
Disabled buttons suck
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
fridayfrontend  cssbasics  accessibility  disabled  buttons 
26 days ago by spaceninja
You need to fix your `line-height`
TL;DR: Body text (your normal paragraph text) should have a line-height of 1.4–1.6, give or take. Different fonts mean different line-height. Changes in font-size mean adjusting line-height. Really big fonts should have a tight line-height. Uppercase text should have a tighter line-height than the body.
fridayfrontend  css  cssbasics  line-height 
26 days ago by spaceninja
HTML for Numeric Zip Codes
But Zach pointed out that type="number" is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). So, zip codes, while they look like numbers, are probably best treated as strings.
fridayfrontend  css  cssbasics  zipcodes  forms  input  numbers  validation 
26 days ago by spaceninja
All the reasons you don't need a modal — and what to use instead.
fridayfrontend  css  cssbasics  modals  design 
4 weeks ago by spaceninja
The dialog element
Let's talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content.
fridayfrontend  css  cssbasics  html  dialog  modals 
4 weeks ago by spaceninja
Valid CSS Content
There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. The property generally takes anything you drop in there. However, there are some invalid values it won't accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.
fridayfrontend  css  cssbasics  generated  content  before  after 
4 weeks ago by spaceninja
Sass Selectors: To Nest Or Not To Nest?
Should you nest your BEM-style selectors by using & to construct the verbose selectors or not?
fridayfrontend  css  cssbasics  sass  nesting  bem 
4 weeks ago by spaceninja
When (and When Not) to Use the Number Input
You might think the number input is appropriate for the card number, expiry date, and CVC number — after all, they all consist of numbers. But it’s more complicated than that. By looking at what the spec says, what browsers do, and what users need, we can more easily determine when the number input is appropriate or not.
fridayfrontend  cssbasics  forms  numbers  inputs 
4 weeks ago by spaceninja
How to Get and Set CSS Variable Values with JavaScript
CSS variables are a very welcome addition to the language, despite them being incredibly basic.  Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need.  And just like every other part of a webpage, you can get and manipulate CSS variable values -- let's check out how!
fridayfrontend  css  cssbasics  javascript  variables  customproperties 
4 weeks ago by spaceninja
Quick Tip: Debug iOS Safari on a True Local Emulator (or your actual iPhone/iPad)
I’m sure plenty of folks know this, but like literally anything else in the world, plenty of folks don’t. This is an incredibly handy feature of developing responsive sites and testing them on as real of devices as you can. Plus, it doesn’t cost anything additional beyond your macOS computer.
fridayfrontend  cssbasics  ios  debugging  emulator  devtools 
4 weeks ago by spaceninja
Understanding the difference between grid-template and grid-auto
With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the same thing. In actual fact, they have little in common and are used to achieve different things.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
4 weeks ago by spaceninja
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
In this article, I want to explore how the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
5 weeks ago by spaceninja
Creating Layouts with CSS Grid
CSS Grid is a relatively recent layout specification, shipping in most browsers as of October 2017. Grid allows us to create layouts that were previously impossible, or only possible with lots of DOM operations.
fridayfrontend  css  cssbasics  grids  layout  cssgrid 
5 weeks ago by spaceninja
Introducing the Button element - HankChizlJaw
How many times have you thought to yourself something like this? "As much as I love making <div> elements buttons, it'd be great if there was an npm package that I could install that would give me keyboard events and focus." Think no more, because I have exciting news. There's a native element called a <button>, and I'm here to talk about it with you today.
fridayfrontend  cssbasics  html  buttons  accessibility 
5 weeks ago by spaceninja
How I remember CSS Grid properties
The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid.
fridayfrontend  cssbasics  css  cssgrid  grids  layout 
5 weeks ago by spaceninja
Use Cases For Flexbox
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?
fridayfrontend  css  cssbasics  flexbox  grids  layout 
5 weeks ago by spaceninja
One Invalid Pseudo Selector Equals an Entire Ignored Selector
Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, Webkit and Gecko browsers assume it is valid, not invalidating the selector list.
fridayfrontend  cssbasics  css  pseudo-elements  browsers 
5 weeks ago by spaceninja
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
fridayfrontend  cssbasics  layout  cssgrid  grids  flexbox  columns 
5 weeks ago by spaceninja
The Shapes of CSS
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
fridayfrontend  cssbasics  css  shapes 
6 weeks ago by spaceninja
Lazy Loading Images – The Complete Guide
Now, since we cannot do away with images, we need to make our web pages load really fast with them. In this guide, we will talk about lazy loading images, a technique that helps improve the page load time and reduce page size while still retaining all the images on the page.
fridayfrontend  cssbasics  lazyload  images  performance 
6 weeks ago by spaceninja
Don't use empty or low content for your design system grid examples
But anyway, say you're setting up a grid that uses mixed values for column widths like this. Don't do that with totally empty columns, otherwise, you'll get a false sense of how those columns will behave.
fridayfrontend  cssbasics  grids  cssgrid  flexbox  layout 
6 weeks ago by spaceninja
Writing good text alternatives
They say a picture paints a thousand words. Alt text and captions give people who aren’t able to see pictures these words.
fridayfrontend  cssbasics  html  accessibility  alt 
6 weeks ago by spaceninja
Putting things on top of other things
This is a post about stacking contexts: what they are, when they happen, and why.
fridayfrontend  cssbasics  css  z-index 
6 weeks ago by spaceninja
Much Ado About ARIA
With this accessibility beginner series, I am hoping to recapture some of this excitement for learning while introducing you to a variety of topics in the world of digital accessibility. The plan is to keep these articles light, factual, and most of all, give you something practical to add to your daily workflow.
fridayfrontend  cssbasics  accessibility  aria 
7 weeks ago by spaceninja
I created a copy of Red Onion's Daily Prophet using CSS Flexbox
If you have ever seen Red Onion’s Daily Prophet page then you’d know that it's a really awesome and creative layout which is built using CSS Grid. It’s similar to an old-style print layout which seems quite challenging to replicate on the web. Creating a clone of it using flexbox instead of css grid would be a really good challenge if you want to learn how to use the flexbox layout.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox  harrypotter 
7 weeks ago by spaceninja
CSS Only Floated Labels with :placeholder-shown pseudo class
In this tutorial, we’re going to build a CSS only solution to the floated label technique using the :placeholder-shown pseudo class.
fridayfrontend  css  cssbasics  forms  html  placeholders  accessibility 
7 weeks ago by spaceninja
Discover which iOS devices are used on your site
If you’re a web developer and you’ve tried to know the specific iOS devices used by your users, you’ve hit a wall: different devices have the same user agent and screen size. The solution, used on, is to ask WebGL for the user’s GPU. iOS devices return a string like “Apple A7 GPU”, combined with the screen size that’s enough to differentiate most devices.
fridayfrontend  cssbasics  javascript  ios  analytics 
7 weeks ago by spaceninja
HTML elements, unite! The Voltron-like powers of combining elements.
Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness.
fridayfrontend  cssbasics  html  semantics  voltron  accessibility 
7 weeks ago by spaceninja
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 
8 weeks 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 
8 weeks 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 
8 weeks 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 
8 weeks 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 
8 weeks 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 
8 weeks 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 
8 weeks 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 
9 weeks 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 
9 weeks ago by spaceninja
Not the css specificity guide you deserve, but the one you need right now.
fridayfrontend  css  cssbasics  specificity  batman 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks ago by spaceninja
« earlier      
per page:    204080120160

Copy this bookmark:

to read