Marcode
πŸ“—Stay on top, read our blog πŸ˜„πŸ’ͺ
  • Welcome to Marcode Docs 🏑
  • learn
    • Get started guide πŸ•
    • Markup cheat sheet πŸ““
    • Using Marcode with Icons8 Lunacy
    • Components πŸ’Ž
    • Exporting to Code 🚚
    • Sketch Assistant Rules Explained πŸ“
  • goodies
    • CSS Writer plugin πŸ”Œ
    • Code snippets πŸ‘©β€πŸ’»
    • 3rd Party Plugins & Apps βš™οΈ
    • Join our Slack πŸ‘―β€β™‚οΈ
  • Support
    • FAQ❓
    • Releases ✍️
Powered by GitBook
On this page
  • How to add custom CSS without CSS Writer
  • 1. Creating the file
  • 2. Linking to the external asset inside Sketch
  • How to add custom CSS with CSS Writer
  • CSS snippets
  • Text Hover Animate Bottom Border
  • Flexbox Equal Heights
  1. goodies

Code snippets πŸ‘©β€πŸ’»

Here's a collection of great code snippets that we have found on the internets that work great with Marcode.

PreviousCSS Writer plugin πŸ”ŒNext3rd Party Plugins & Apps βš™οΈ

Last updated 3 years ago

How to add custom CSS without

1. Creating the file

  1. Copy the code to a blank new text document, we usually use or

  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 πŸ‘‡

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

How to add custom CSS with

  1. Install the plugin

  2. Open up Sketch, create a new document and create your Marcode magic

  3. Launch our CSS Writer plugin

  4. Select the Artboard where you want to add your custom CSS code

  5. Paste the code into our code editor and hit the save button

  6. Copy the class names e.g. link onto the ones of our components that you want to customize or alter with your own code

  7. Save in Sketch

  8. Open the same Sketch file in Marcode and do a happy dance πŸ‘―β€β™‚οΈ

CSS snippets

Text Hover Animate Bottom Border

 .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.

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.

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

Purchase our awesome Sketch plugin from our

πŸ“—

CSS Writer
Visual Studio Code
Sublime Text
CSS Writer
marketplace
Original source
Page cover image