# Code snippets 👩‍💻

## How to apply these

### **In Sketch2React v2021.2.7 and earlier**

### **1. Creating the file**

1. Copy the code to a **blank new text document**, we usually use [Visual Studio Code](https://code.visualstudio.com/download) or [Sublime Text](https://www.sublimetext.com/3)
2. You can use all of these snippets in the same document just don't forget when saving to add .css or .js to the name of the document e.g. ***mycustomcode.css*** or ***mycustomcode.js***
3. Use the class name e.g ***.link*** and enter it like this \[link] on any of our components 👇

![Here we're using our custom .link CSS attached to a reusable component aka symbol \[link\]](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2FrG6hvw66vhw8xKjcihNs%2FCleanShot%202021-10-15%20at%2022.24.51%402x.png?alt=media\&token=1ed7a732-eacb-4319-b46d-5caac1738072)

### 2. Linking to the external asset inside Sketch

1. Drag the newly created .css or .js file to the Macs Terminal app, you will need the correct file path for linking this inside Sketch
2. Copy the file entire file path to clipboard, it usually starts with */Users/…*
3. In Sketch use the Text tool and copy the file path from clipboard into your artboard
4. Add *file://* just before */Users/etcetc* ending up with ***file:///Users/etcetc…***
5. In the Side Panel name the text layer **{externalasset.css}** or **{externalasset.js}**
6. Make sure to copy the text layer to all of the artboards using your custom code
7. You can add as many {externalasset} layers as you need

![Here we dragged the gradienta.css document onto Terminal to get the correct file path](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2Fxh5kFhpiulehwG4NwiEM%2FCleanShot%202021-10-15%20at%2022.40.20%402x.png?alt=media\&token=d64a47b5-8448-49ca-b0af-f1bbe5028139)

![You can add both local and remote {externalasset} files](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2FuRAy0rcRf9j6e2pqw8Cq%2FCleanShot%202021-10-16%20at%2009.26.51%402x.png?alt=media\&token=668eeb7b-e1cb-48b4-ac95-327130f8b894)

### In Sketch2React Beta v2022

![Our code editor plugin (early build) makes this process so much more enjoyable](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2FX5qU7wKtUe7tNfoqnaqy%2FCleanShot%202022-01-28%20at%2017.25.28%402x.png?alt=media\&token=31471973-63fe-46b2-b5a2-f1e892f418f7)

1. Open up the folder *Experimental* that comes with your [Sketch2React 2021 + license](https://marketplace.sketch2react.io/product/sketch2react/) purchase
2. Install the plugin called *sketch2react-code.sketchplugin*
3. Open up Sketch, create a new document and create your Sketch2React magic
4. Launch our code editor plugin
5. Select the artboard where you want to add your custom CSS code
6. Paste the code into our code editor and hit the save button
7. Copy the class names e.g. *link* onto the ones of our components that you want to customize or alter with your own code
8. Save in Sketch
9. Open the same Sketch file in Sketch2React Beta and do a happy dance 👯‍♂️

## CSS snippets

### Text Hover Animate Bottom Border

![](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2FjalL8xlRSAcvmzYOxVTw%2Fanimated-text-hover-line.gif?alt=media\&token=b7e3d886-367d-4aaf-aa0b-b546e37b47a6)

```css
 .link::after {
   content: '';
   display: block;
   width: 0;
   height: 8px;
   margin-top:5px;
   background: #0b76ff;
   transition: width .3s ease-out;
}
 .link:hover::after {
   width: 100%;
}
 a:link {
   text-decoration: none;
}
```

#### What it does

Creates a simple animated line under any component that uses our {link} component. Feel free to change the height, color animation or anything else.

📗[Original source](https://coreymoen.notion.site/coreymoen/de3afdae4ffe481d8afe33bf52de2346?v=b20394b5d9774b90b146b59eb6888637\&p=e094fc3bc295452d8b7be6ea858a978a)

### Flexbox Equal Heights

A great trick to balance your designs in code is to use equal heights on things such as column backgrounds etc. Here's a neat snippet using only css flexbox.

![OMG it's aaaaaawesome, right? 🐹](https://3385312130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-887967055%2Fuploads%2Fzn5gxzPXUxaqVrV9goZo%2Fequalheights.gif?alt=media\&token=73cf6986-42b9-4420-a7c5-795601b70d39)

```css
.flexbox {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
overflow: hidden;
}
```