Sass mixins | Placeholders | Touchy
Today, I want to talk about some of the best practices that a modern web designer/developer must adopt in the current tech-scenario. This article is a compilation of research and the real life experiences I have gained over all these years. I believe that these handy tools/techniques will ease the workflow of any developer and also enhance our skills in the field of modern web design/development.
I will be giving a brief introduction to the following topics and further reading can be achieved by following the links given below.
8 Sass mixins you must have in your toolbox
Let us start with 8 Sass mixins which are a must for any modern web developer’s toolbox. This is usually done for writing CSS with sass preprocessor. These mixins have been proven to be very handy during web design/development.
First up, we have a mixin which sets a rem font size with the fallback of a pixel. For instance, if a browser does not support rem unit, it will revert back to the pixel unit.
Next up is SVG background images with a png fallback. For instance, if a browser does not support SVG, then it falls back or reverts to the png image and it will do a retina image depending upon the pixel density of the screen.
http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
Sass: Mixin or Placeholder?
A mixin is a functional block of code which includes a set of CSS rules, allows us to write functions and use those mixins/functions elsewhere even allowing us to expand those out which will get processed by Sass. It would be great if they provided the default CSS but fortunately, we have some CSS pre-processor(sass, less) which fills those gaps.
Speaking about placeholders, they look like they are almost the same thing. They also include a set of rules and can be used elsewhere. The major difference comes in the fact that mixins can be included someplace else or let’s say can even repeated but placeholders can be extended as well. Mixin provides a feature of including fancy variables as arguments while placeholder can be expanded along with the mixins.
https://www.sitepoint.com/sass-mixin-placeholder/
Touchy
The final topic which I want to shed some light on, is touchy, a handy jQuery plugin for handling various touch events. It is a plugin which exposes event data like velocity for long pressing, dragging, pinching, rotating and swiping. One such example of its usage includes prevention of a conflict which may arise when a user opts to drag or swipe. The most important feature being abstracting the pinching on iOS and Android devices.
We can move ahead and look at the code/documentation on GitHub and include the touchy plugin into our application.
