Sketch2React
Published in

Sketch2React

How to add custom CSS to Marcode & Sketch2React

One of the most powerful features of Marcode and Sketch2React is that you can add custom CSS directly affecting layers and groups inside Sketch or Icons8 Lunacy.

Adding a fast and small CSS animation library like Animate.css 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.

But let’s start with the basics, we’ll cover adding CSS animation libraries in upcoming articles.

What is a CSS plugin?

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’s up to you, here’s an example:

A very simple CSS plugin for smooth image corners

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 is the default HTML image class name for all images that you add.

You can also have several CSS snippets inside one plugin, in fact, you can have as many as you want.

Still a very simple CSS plugin, we just added one more cool thang

Here we have added another CSS snippet to our .css file, let’s break them down:

  • img adds whatever border radius you want to all of your images
  • centerityo Centers whatever group or layer you want right in the middle of our built-in Bootstrap grid

Furthermore, as you have learned by above examples, CSS class names can be called anything you feel for. Just make sure to avoid using special characters and stick to English.

Let’s create a .css file

It’s super easy. Let us break down each step for you, after this you will feel like a super designer with some added extra developer skills. Pinkie promise.

  1. Use a code editor like Visual Studio Code to create a new file
  2. Add some custom CSS code you can use our example from above
.img {
border-radius: 18px;
}

.centerityo {
display: grid;
place-items: center;
}
  1. Make sure to save the file as yourname.css

Let’s get the correct file path

  1. Drag the newly created .css file to the Mac’s Terminal app, you will need the correct file path for linking this inside Sketch
  1. Copy the file entire file path to clipboard, it usually starts with /Users/…
  2. In Sketch or Icons8 Lunacy use the Text tool and copy the file path from clipboard into the Artboard where you want to add your custom CSS plugin
  3. Add file:// just before /Users/etcetc ending up with file:///Users/etcetc…
  4. In the Side Panel (Sketch) or Left Panel (Lunacy) name the Text layer {externalasset.css}
{externalasset.css} is used for adding web fonts and custom CSS code
  1. Make sure to copy the Text layer {externalasset.css} to all the Artboards using your custom CSS code
  2. You can add as many {externalasset.css} layers as you need, for example when embedding your web fonts

How to add your custom CSS to layers and groups

So now that you have done all the hard work creating your custom CSS plugin and getting the connections right, it’s time for the real fun part; attaching them too layers and groups inside Sketch or Icons8 Lunacy.

Let’s use our built-in Template for App Portfolio as a use case.

Since we already have everything setup, lets reverse engineer our custom built component that we call Nice Card with Image Link in our template.

Lets peak inside this master Sketch symbol and see what we may find?

When we have clicked all the way down to the linked image component it looks like this:

Note that we use [img] attached to our {img} component

Let’s have a quick recap from our previous article about how our markup works:

This is how all of our components are structured 🤖

All custom CSS plugins gets attached to the layers or groups of choice by adding the class names [inside like this]. Easy-peasy! It may look complicated at times, but if you understand this very basic logic, everything else will make more sense. Pinkie promise.

By adding the class name img on a master symbol component, when we look inside Marcode it looks like this:

Our border radius plugin at work — Huzzah!

Doing it all with our Writer plugin

One of the main reasons we developed our premium Sketch plugin Writer, was to find a way to do all of above things, but directly from inside Sketch. We’re going to go into detail in upcoming articles, but here’s a sneak peak:

That’s all for this time folks 🧡

--

--

--

The best source of Sketch2React & Stratos Tokens related articles on Earth 🌎

Recommended from Medium

| Engineering News-Record

| Engineering News-Record

Taking A Step Back

Building a Basic Authorization Server with Implicit Flow

Making the simple things simple: Coda filters

Top 5 Programming Languages to Learn in 2021

5 Secret DS/ML Python Modules Nobody Knows About

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Maguid

Juan Maguid

Co-founder of Team Sketch2React. Designer that wants to make your maker lives easier😺👍

More from Medium

Micro-website for a conference

Enjoying web design using Tailwindcss

How to use After Effects: Zooming 🔍

Orpetron Web Design Awards Winner Sites (Feb 28– Mar 6)