{"id":243,"date":"2020-01-24T18:13:02","date_gmt":"2020-01-24T17:13:02","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/01\/24\/sketch-app-weird-layer-names-react-code\/"},"modified":"2021-05-17T11:07:37","modified_gmt":"2021-05-17T09:07:37","slug":"sketch-app-weird-layer-names-react-code","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch-app-weird-layer-names-react-code\/","title":{"rendered":"Sketch app + weird layer names = React code!?"},"content":{"rendered":"

If you\u2019ve come in contact with Sketch2React<\/em> or Stratos<\/em> chances are big that you\u2019ve also encountered the weird layer naming convention a.k.a. our markup<\/em>. It might seem strange and hard to learn, but in this article I\u2019ll explain why we use the markup and flatten the learning curve a bit by showing you that it really comes down to only three<\/em><\/strong> things.<\/p>\n

The need for markup<\/h3>\n

Sketch App is really good for creating visual stuff such as web design (I know you can do a lot more, but let\u2019s keep it simple in this article). There is however a limitation as to what Sketch App can provide when it comes to metadata. Metadata is \u201cdata about the data\u201d.<\/p>\n

Let me give you one example:<\/h4>\n

You create a Text-layer in Sketch and style it according to i.e. your company\u2019s design guidelines. Sketch is aware of the Text-layer\u2019s visual representation (formatting, position, etc.).<\/p>\n

What it does not know however is: what kind of html element type<\/em> should I be? Should I be a <p>, a <span>, an <h1> or something else?<\/p>\n

Of course, we could have made the Sketch2React render-engine go like: hey, it\u2019s a Sketch Text-layer, let\u2019s create an html paragraph (<p>).<\/em><\/p>\n

The problem is then that you would always have ended up with an html paragraph (<p>) that looks like your i.e. Heading 1 in Sketch, but It wouldn\u2019t be a \u201creal\u201d Heading 1 from a code point of view.<\/p>\n

If you style a Heading in Sketch, you should get a Heading html element that has the corresponding formatting as output.<\/p><\/blockquote>\n

This is the reason we need the markup: To fill the information gaps<\/em> in the Sketch-file in order to generate proper, useful code.<\/p>\n

So, if you name your Heading 1 Text-layer <\/em>in Sketch: {h1}<\/strong>, you\u2019ll get an <h1> html element<\/em> that has the styling like the Text-layer you have in Sketch<\/em>. (The markup differs slightly between Sketch2React v.1.x<\/em> and Stratos<\/em>)<\/p>\n

The three-ish types of metadata<\/h3>\n

We have put a lot of effort into making the two markups (Sketch2React v1.x.<\/em> and Stratos<\/em>) a similar as possible, but in order to support more advanced features and functionalities in Stratos<\/em> some things needed to be changed. You can find more detailed documentation about markups here<\/a>. Sketch2React v.1.x\u2019s <\/em>markup <\/em>is made up of two parts<\/strong>, while Stratos\u2019<\/em> markup <\/em>is made up of three parts<\/strong>.<\/p>\n

Sketch2React v.1.x<\/h4>\n
{Sketch2React component type<\/em>} [CSS-classes<\/em>]<\/figcaption><\/figure>\n

In the above example we have a Sketch Text-layer that will:<\/p>\n