How to design t-shirts using HTML & CSS

Designing a t-shirt on Forked is just like building a web page, we add content with HTML and style with CSS. This how-to guide will walk you through creating a simple t-shirt design.

Choose a t-shirt colour

Using the t-shirt colour selector, choose the t-shirt colour you would like. We've chosen red for our example design.

A screengrab of the Forked t-shirt code editor with a preview on a plain red t-shirt.

🚧The colour selector is very basic at the moment, we are planning to improve this.

Add some content

Next we’ll add some content to the design by writing some HTML in the HTML tab. In the example we are adding the HTML <h1>starred</h1>

A screengrab of the Forked t-shirt code editor, with some HTML in the editor and some unstyled text ‘starred’ on a preview of a red t-shirt.

You can also add SVG code in the HTML tab. Let’s grab an open source SVG from GitHub and paste the SVG code at the bottom of our HTML.

A screengrab of the Forked t-shirt code editor, with some HTML & SVG code in the editor and some unstyled text saying ‘starred’ and a tiny black star on a preview of a red t-shirt.
Okay, it doesn‘t look very good yet but we’re getting there.

Add some style

Writing CSS on Forked is just like writing CSS for web pages, but with two important exceptions.

Don't use pixel units

Instead of using pixels for spacing, font sizes etc, use viewport relative units such as vh and vw. This will ensure your design scales correctly for printing. If you are not familiar with viewport relative units, this article on CSS tricks is a good starting point. In this context, the viewport is the print zone on the t-shirt. The printable zone on the t-shirt is actually an iframe!

Don’t rely on opacity

T-shirt printers struggle with opacity, so instead use solid colors.

With that in mind, we’ll add the following CSS rules:

svg {
      fill: white;
      width: 100vw;
      height: auto;
  }

  h1 {
      position: absolute;
      text-align: center;
      z-index: 1;
      width: 100%;
      top: 30vh;
      font-family: "dm";
  }

Here we are absolutley positioning the text on top of the svg, just as we might on a web page. Note that the sizes are using viewport relative units as mentioned above.

We've set font to "dm" which is Dank Mono. You can see a full list of fonts available on Forked here.

A screengrab of the Forked t-shirt code editor, with some CSS code in the editor and some styled text saying ‘starred’ on a large white start on a preview of a red t-shirt.
I don’t think it’s going to win any fashion awards but we created a simple design using our HTML & CSS knowledge

Save your design

When it comes to saving your design you can give it a name and description.

A screengrab of a form beneath the Forked t-shirt code editor with name a description field and a button that says ‘Save this fork’.
The name in this image was auto generated from the t-shirt content.

Hitting ‘Save this fork’ will publish you design and create a product page.

A screengrab of a product page featuring a mock-up of a star t-shirt design, buy button and product description.
Success!

Try it for yourself

Start coding in the editor 👇 or browse existing designs and find something to hack on.

Zoom

Finished hacking?

When you’re done, fork and save this tee!