Archetype

KO | EN

gitlite — search

#python #react #llm #android #machine-learning #deep-learning #nodejs #java #windows #cli #awesome-list #vue #security #openai

(★ 42)

An expiriemental CSS layout plugin for Sketch

Archetype Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Archetype for Sketch

[![Demo GIF](https://raw.githubusercontent.com/matt-curtis/Archetype/master/Demo.gif)](Demo.gif)

## What is Archetype?

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

## How does it work?

Archetype works by internally converting your Sketch layer hierarchy to a DOM equivalent. That generated DOM looks something like this:

```html
<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>

<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;`

## How do I use it?

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:

```css
//	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.

## What next?

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](http://twitter.com/matt_sven).

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](https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3) 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!](https://d262ilb51hltx0.cloudfront.net/max/1200/1*US54_Pg5_QT71RlmdzqBcw.ogv))

Archetype

Archetype Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Archetype

Archetype Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README