Archetype is an experimental Sketch Plugin for adaptive and responsive layouts. It's something I put together made in my free time as one of several plugin ideas I'm working on regarding Sketch. It basically allows you to use CSS to layout elements in Sketch.
Archetype works by internally converting your Sketch layer hierarchy to a DOM equivalent. That generated DOM looks something like this:
<html>
<head>
<style>
* { box-sizing: border-box; }
html, body {
padding: 0; margin: 0;
min-width: 100%; min-height: 100%;
}
.sketch-text {
display: inline-block;
}
</style>
<style>/* Your CSS */</style>
</head>
<body>
<div class="background" data-name="Background [background]" data-width="60" data-height="130" id="layerId0"></div>
</body>
</html>As all elements are divs, all elements are by default display: block. Text elements are inline blocks. By default, all text layers enter the DOM with their size set to their size in Sketch, eg.: style='width: (textLayerWidth)px; height:(textLayerHeight)px;
You can install Archetype by downloading the Archetype.sketchplugin from the repo here, then copying it to the Sketch plugins folder (which you can get to via Plugins > Reveal Plugins Folder... in Sketch).
After installing it, you can run it from the Plugins Menu Plugins > Archetype > Run Achetype Demo. A panel will open (like in the gif above) where you can write CSS (or load it from a file). Try it out with the attached .sketch document and the accompanying .css file!
Internally, Achetype generates class names for layers based on your layer names. For example, a layer with the name Menu Background [menu-bg] would be a div with class='menu-bg'. There's also a few additional autogenerated classes you can use:
// Archetype generates this CSS for you,
// [width] and [height] are the layer's original sizes in the Sketch document
.keep-size { width: [width]px; height: [height]px; };
.use-width { width: [width]px; };
.use-height { height: [height]px; };There's also the class .ignore-layers, which will cause Arcetype to ignore all child layers of that element (useful for groups with fixed sizes).
Archetype targets the currently selected artboard (or the first artboard with a layer selected). If there is only one artboard that artboard is targeted.
Foremost, I'm looking for feedback on this plugin, and on what your ideal Sketch plugin/tool for adaptive/responive design looks like in general. Feel free to leave an issue here, or on twitter.
Ideally, it is my end goal to create a plugin that makes designing responsive and adaptive layouts directly in Sketch easier to acheive without having to manually lay out and position a million artboards.
Josh Puckett has written an excellent article on modern design tools and where they're lacking in regard to adaptive and responsive design, and proposes solutions as well. My next idea is to build a plugin that allows for iOS/OS X AutoLayout-like tools in Sketch, similar to what he proposes in his article. (Click for awesome video demo!)