💯 FREE BRIC: MarkIt, Hand drawn highlighter markers

Custom Brics
1

Hello Blocs Brics Fans,

:pushpin: Something worth pausing on before I get to the Bric itself. If you add up every custom Bric published by every developer in this community, the Blocs Store has just reached one hundred Brics :open_mouth:. That is a hundred pieces of work made by people who mostly do not know each other, all pointed at the same app.

Number 100 turned out to be ours, so we decided to give it away.

What is MarkIt

MarkIt puts a hand drawn highlighter marker behind any words on your page. We got tired of faking highlights with a background colour on a span, because a background colour draws a rectangle and a highlighter never does. So MarkIt builds the stroke from two shaped layers with a roughening SVG filter over the top: the edge wobbles, one corner rounds off unevenly, and a small tick of darker ink trails off the end where the pen lifted.

The bit we’re most pleased with is that the effect is not trapped inside the Bric. MarkIt hands you a reusable class. Drop one Bric into a Global Area, then highlight words in your hero, your pricing table and your FAQ, all from that single instance.

The workflow

  1. Drop MarkIt on a page. It claims its own class name automatically.

  2. Pick one of six inks or mix your own. The canvas preview repaints live against your real background.

  3. Click Copy Snippet, paste it into a Code Widget, edit the words. Or Copy Class if you already have markup.

A few things we think you will like

• No exported JavaScript at all. Your visitors get one CSS rule and a hidden SVG filter.
• It inherits your fonts, so it looks like it belongs on your site rather than bolted on.
• Each Bric owns its own class, and there is a New Class Name button for when you duplicate one.

Price

FREE Not free for a launch week. FREE Forever. It updates through the Extension Manager like everything else. Download it from the Blocs Store :backhand_index_pointing_right: here

Documentation

Want to read the documentation prior downloading? :backhand_index_pointing_right: Read the documentation

:partying_face: Congratulations to every developer who put one of the other ninety nine in the store. Genuinely good company to be in. :man_technologist:

10 Likes
2

Love this, thank you!