Rachel Andrew has been digging around in the CSS Fragmentation spec, and finding browser support is somewhat fragmented. In this article, she explains what fragmentation is, why you might want to use it, and what the state of browser support is. She’ll also show you the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects.
Read more…
In this tutorial, Ahmed Bouchefra will use the latest versions of Bootstrap 4 and Angular 7 to build an Angular application and style the interface with Bootstrap. Let’s see how we can integrate Bootstrap CSS styles and JavaScript files with an Angular project generated using the Angular CLI, and how to use form controls and classes to create beautiful forms and how to style HTML tables using Table styles.
Read more…
Tables frequently appear on the web but aren’t easy to design and code. People will expect tables. Not those fancy ones from design inspiration sites but Excel-looking monsters with hundreds of cells and complex interaction. In this case, a designer faces many challenges. With this illustrated guide, Slava Shestopalov explains the table anatomy and how to build a table, keeping in mind its future elaboration.
Read more…
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. Dealing with old browsers — or browsers which do not support something that we want to use — is part of the job of a web developer. That said, things are far better now than in the past. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
Read more…
Tables are a design pattern for displaying large amounts of data in rows and columns, and have been used for this purpose as early as the 2nd century and when the world started to go digital, tables came along with us. Tables have not yet seemed to fall out of favor, so, in this article, Huijing Chen will take a look at how we can create tables on the web in 2019.
Read more…
The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well. Rachel will take a look at Multi-column Layout — often referred to as multicol or sometimes “CSS Columns”. You’ll find out which tasks it is suited for, and some of the things to watch out for when making columns.
Read more…
Let’s make 2019… fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today.
Read more…
In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.
Read more…
You don’t need to commit to memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. In this article, Rachel Andrew aims to guide you along your path of learning CSS and outline resources for further reading on key areas of modern CSS development. Many of those are things right here on Smashing Magazine. Her aim is to cover the breadth of modern CSS with a focus on a few key areas, that will help to unlock the rest of the language for you.
Read more…
Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. Add on top of these issues the variables of different screen sizes, language preferences and plain human error, and we find a lot of small things to trip up a developer. When implementing a user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. In this article, Ahmad Shadeed has put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project. Let’s begin.
Read more…
