{"id":1859,"date":"2022-03-05T18:26:14","date_gmt":"2022-03-05T17:26:14","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1859"},"modified":"2022-03-13T23:25:26","modified_gmt":"2022-03-13T22:25:26","slug":"how-to-add-custom-css-to-marcode","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-add-custom-css-to-marcode\/","title":{"rendered":"How to add custom CSS"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

One of the most powerful features of Marcode<\/a> and Sketch2React<\/a> is that you can add custom CSS directly affecting layers and groups inside Sketch or Icons8 Lunacy.<\/p>\r\n

Adding a fast and small CSS animation library like Animate.css<\/a> is a breeze, not to mention extremely fun. Using external CSS animation libraries opens up a way to experiment with real code scenarios directly inside your design application.<\/p>\r\n

But let\u2019s start with the basics, we\u2019ll cover adding CSS animation libraries in upcoming articles.<\/p>\r\n

What is a CSS plugin?<\/h1>\r\n

A CSS plugin is nothing more than a .css file that you create using a code editor like Visual Studio Code. Simple as that. What CSS you add it\u2019s up to you, here\u2019s an example:<\/p>\r\n

\"\"<\/a>
A very simple CSS plugin for smooth, rounded image corners<\/figcaption><\/figure>\r\n

The only thing that this CSS plugin does is to create a border radius of 12px on all of your images. Why? The class img<\/em> is the default HTML image class name for all images that you add.<\/p>\r\n

You can also have several CSS snippets inside one plugin, in fact, you can have as many as you want.<\/p>\r\n

\"\"<\/a>
Still a very simple CSS plugin, we just added one more cool thang<\/figcaption><\/figure>\r\n

Here we have added another CSS snippet to our .css file, let\u2019s break them down:<\/p>\r\n