BBVA API Market
● Traditional preprocessors are not extensible. Each one has a number of features that cannot be modified or expanded. A proprietary extension needs to be created to do so.
● Each CSS preprocessor has its own standards, in most cases far removed from W3C standards. Bringing a project’s design standards over to W3C creates problems.
● With PostCSS, developers have plugins that do adapt to W3C design standards. This means that the entire process for developing the project is in line with those standards, without any problems.
● If those plugins do not offer what is needed, PostCSS offers developers the possibility of designing their own. Moreover, the plugins can be installed separately and the developer can decide the order in which they are run. They can also be configured.
Once we have Node.js on the computer, Gulp should be installed. Installation command:
npm install -g gulp
If the Linux or Mac OS X operating system is being run, the command would be as follows:
sudo npm install -g gulp
When developers have the project fully configured and with Node.js and Gulp running on the computer, all the developer needs to do to install PostCSS is use the following command line: npm install –save-dev gulp-postcss. Does Gulp need to be installed in order to configure PostCSS on the computer? No, it’s one way of installing it if we often use this task manager for projects.
We can also run the following installation command in npm to configure PostCSS without the need for Gulp, Grunt or Broccoli: npm install -g postcss-cli. The best way to make sure that everything is alright and PostCSS is installed, is to run this command: postcss –help. PostCSS has all the configuration documentation in the GitHub respository.
Each of these plugins performs functions and has very specific features that sets it apart from the rest. This is why on many occasions developers do not use plugins separately and prefer to use plugin bundles that combine functionalities. The best known is probably cssnext. Here is the open repository of this metaplugin in GitHub. Here is the documentation.
cssnext offers all kinds of features. This is the complete list of the most noteworthy ones. Some of them are:
● Customized color selectors.
● Adaptable media queries.
● Customized properties and variables.
● CSS pseudo-classes.
● Property filter.
● Color function.
● Adding fallbacks in RGBA colors.
● Ability to add conditionals.
● Grid system.
● Optimization tools.
It is not the only plugin the combines different functionalities. PreCSS, a plugin bundle developed by Jonathan Neal, is also widely used by the developer community. The command for installing PreCSS with npm is as follows: npm install precss –save-dev. This is a fairly comprehensive tutorial on how to install this plugin bundle with or without a task manager such as Gulp or Grunt. All of its specific features are very well summarized.
Developers also have some repositories to run sorted searches for specific plugins for PostCSS. One of the most frequently used is PostCSS.parts. It has a great search engine and in addition the plugins are sorted by category, such as optimization, media queries, color, fonts, images or shortcuts. It’s as easy as going to the category and exploring the options.
Follow us on @BBVAAPIMarket
In a connected world, APIs are the glue that keeps all the parts that form our day-to-day lives in place. The same way the power of glue depends on the material it is used on and the knowledge of its properties, APIs are only as useful as their documentation allows for.
App users must be aware that a button... is in fact a clickable button. Therefore, app buttons must be designed in such a way that users should feel invited to interact with the interface and actually click on it.
Slack, the communication platform for companies, integrates different services into a single messaging application, all thanks to its API. Any developer can use it to create a bot that responds to the user’s requests by means of a chat. It already has an army of these small programs and the family continues to grow.