{"id":1843,"date":"2022-02-28T11:25:34","date_gmt":"2022-02-28T10:25:34","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1843"},"modified":"2022-02-28T11:34:03","modified_gmt":"2022-02-28T10:34:03","slug":"how-our-markup-works","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-our-markup-works\/","title":{"rendered":"How our markup works"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

This article aims to answer a couple of core questions we know many of you will ask when you start building in your design app with our markup. It\u2019s actually very straightforward.<\/p>\r\n

Marcode markup structure<\/h2>\r\n

Marcode shares the same markup as Sketch2React, which is based on our version of Atomic CSS. Here\u2019s the structure:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n
\r\n

\"\"<\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
\r\n

This is how all of our components<\/a> are structured. The easiest way of explaining how this works is to use the analogy of Lego bricks. When you buy a Lego, it comes with instructions on how to build that specific build, say the Bat-mobile. You follow the instructions to the point and the result is as expected.<\/p>\r\n

You can also take parts of that Lego build and add other structures to it. That is how you create your own Marcode components, by mixing them together.<\/p>\r\n

Here, let’s take a look at one of the cards that we have in our built-in Template for App Portfolio <\/em>and see how we chose to structure it.<\/p>\r\n

A more in-depth look at a card component<\/h2>\r\n

This is a custom-made component that we created using many of our core components found in many of our free demos. By custom, we mean nothing more than we have combined several components to achieve the result we were aiming for.<\/p>\r\n

\"\"<\/a>
This card component is made up using many of our core components<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n

This Card contains several of our components, to understand them better let’s break them down into categories, like we have done in our documentation.<\/p>\r\n

For grid & layout we use<\/h3>\r\n