In this second part of our tutorial on building Sketch plugins, Matt Curtis will pick up where he left off with the building of our user interface, and then he’ll move on to the key feature of actually generating our layer mosaics and optimizing the final plugin code. You will learn how to connect the user interface to the core plugin code and how to implement the plugin’s main features. Last but not least, you’ll also learn how to optimize the code and the way the plugin works.
Read more…
In this two-part article, you’ll learn how to build your our own Sketch plugins from scratch — giving you the skills needed to accomplish tasks much faster, easier, and better.
Read more…
In this article, Miriam Suzanne takes a deeper dive into the ‘CSS Custom Properties for Cascading Variables’ specification to ask, “Why are they called custom properties, how do they work in the cascade, and what else can we do with them?” Pushing past the “variable” metaphor, custom properties can provide new ways to balance context and isolation in CSS patterns and components.
Read more…
There is a wide variety of choices when it comes to creating a PDF from a web application. In this article, Rachel Andrew takes a look at the tools that are available and shares her recommendations to help you find the tool that works best for you. She’ll explore ways in which we can generate a PDF directly from a web application on the fly. It isn’t a comprehensive list of tools, but instead Rachel is aiming to demonstrate the different approaches. If you have a favorite tool or any experiences of your own to share, please add them to the comments below.
Read more…
Creating complex SVG animations can be a challenging and tedious task — but not anymore. In this article, Mikołaj Dobrucki will show you how to create path animations for the web using SVGator, an online app created especially for the purpose of animating SVG files. It is a web-based app that allows you to import static SVG files, animate them using a user-friendly visual interface, and export them as animated SVG. Exported animations are CSS-based and ready to use on the web.
Read more…
Through this unique “Inspired design decisions” series of article and webinars, Andy Clarke will change that. In the first edition of Inspired Design Decisions, Andy will “Say hello to skinny columns,” a technique which adds one extra narrow column to an otherwise conventional column grid. He explains how to design with, then implement skinny columns using meaningful markup and efficient CSS. He also explains how to design using modular grids to fill your designs with energy.
Read more…
Styling applications is a world in itself, one not often given the importance and attention it deserves. With complex modern user interfaces, it’s only matter of time before your app becomes a mess of unordered styles, reducing consistency and making it harder for new code to be added or changes made to the existing codebase. In this article, Ajay NS welcomes you to take a detailed dive into the different ways of organizing styling in modern applications which often have complex interfaces and design patterns. Let’s walk through BEM, preprocessors, CSS-in-JS and even design systems to find out what works best for you.
Read more…
CSS Grid Layout is switched on by using display: grid. What this single value property actually means is display: block grid. We get a block level box which is defined as a grid container, with direct children that are grid items and participate in grid layout. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.
Read more…
The display specification is a very useful spec to understand as it underpins all of the different layout methods we have. Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.
Read more…
Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes.
Read more…
