wip(markdown): Work on tutorial
This commit is contained in:
parent
8152d65947
commit
6f0b1a6ce3
3 changed files with 34 additions and 36 deletions
|
@ -1,54 +1,40 @@
|
||||||
---
|
---
|
||||||
title: Pattern design tutorial
|
title: Pattern design tutorial
|
||||||
order: 50
|
|
||||||
icons:
|
|
||||||
- javascript
|
|
||||||
- pattern
|
|
||||||
for: developers
|
|
||||||
about: |
|
|
||||||
You'll learn how to create a FreeSewing pattern.
|
|
||||||
We will take you start to finish, from setting up the development environment
|
|
||||||
up to a completed pattern.
|
|
||||||
goals:
|
|
||||||
- Setting up the development environment
|
|
||||||
- Creating a pattern part
|
|
||||||
- Using the user's measurements
|
|
||||||
- Using pattern options
|
|
||||||
- Using the shorthand method
|
|
||||||
- Creating points
|
|
||||||
- Creating paths
|
|
||||||
- Using macros and snippets
|
|
||||||
- Testing your pattern
|
|
||||||
- Adding seam allowance
|
|
||||||
- Adding dimentions for a paperless pattern
|
|
||||||
---
|
---
|
||||||
|
|
||||||
Welcome to the FreeSewing tutorial, where you'll learn how to create a made-to-measure
|
Welcome to the FreeSewing pattern design tutorial, where you'll learn how to
|
||||||
sewing pattern, start to finish.
|
design a made-to-measure sewing pattern, start to finish.
|
||||||
|
|
||||||
You will be designing a pattern for a baby bib. It's a very simple pattern, but that's the point.
|
You will be designing a pattern for a baby bib. It's a very simple pattern, but
|
||||||
Your focus today is on learning FreeSewing and how to translate your designs into code.
|
that's the point. Your focus today is on learning FreeSewing and how to
|
||||||
|
translate your designs into code.
|
||||||
|
|
||||||
At the end of this tutorial, you will have created this pattern:
|
At the end of this tutorial, you will have created this pattern:
|
||||||
|
|
||||||
<Example pattern="tutorial" part="bib">Your end result</Example>
|
<Examples part="tutorial.step11">Your end result</Examples>
|
||||||
|
|
||||||
Before we can get started, let's make sure you have the required software
|
Before we can get started, let's make sure you have the required software
|
||||||
installed on your computer:
|
installed on your computer:
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
FreeSewing is a JavaScript library that runs on [Node.js](https://nodejs.org/).
|
FreeSewing is a JavaScript library that can run in the browser, on
|
||||||
|
[Node.js](https://nodejs.org/), or a variety of other runtimes such as Deno,
|
||||||
|
AWS Lambda, and so on.
|
||||||
|
|
||||||
If you don't have Node.js on your system, follow the link above and
|
For development, we'll use NodeJS. If you don't have Node.js on your system,
|
||||||
install it on your system.
|
follow the link above and install it on your system.
|
||||||
|
|
||||||
|
<Tip compact>You need NodeJS 16 or higher to use FreeSewing</Tip>
|
||||||
|
|
||||||
When you're done, you can test whether it works by running:
|
When you're done, you can test whether it works by running:
|
||||||
|
|
||||||
```bash
|
```sh
|
||||||
node -v
|
node -v
|
||||||
```
|
```
|
||||||
|
|
||||||
If you get the node version number, you're all set.
|
If you get the node version number, you're all set.
|
||||||
|
|
||||||
You can find the complete code of the tutorial pattern for the final result to help make sure you're following the steps correctly [here on GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.js).
|
You can find the complete code of the tutorial pattern for the final result to
|
||||||
|
help make sure you're following the steps correctly [here on
|
||||||
|
GitHub](https://github.com/freesewing/freesewing/blob/develop/designs/tutorial/src/bib.mjs).
|
||||||
|
|
|
@ -5,7 +5,7 @@ order: 100
|
||||||
|
|
||||||
Open a terminal and enter the following command:
|
Open a terminal and enter the following command:
|
||||||
|
|
||||||
```bash
|
```sh
|
||||||
npx @freesewing/new-design
|
npx @freesewing/new-design
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,14 +25,14 @@ This will take a few minutes because we're loading some software for your develo
|
||||||
|
|
||||||
When it's ready, enter the `bib` directory that was just created and run `npm run dev`:
|
When it's ready, enter the `bib` directory that was just created and run `npm run dev`:
|
||||||
|
|
||||||
```bash
|
```sh
|
||||||
cd bib
|
cd bib
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Or if you chose to use Yarn as package manager:
|
Or if you chose to use Yarn as package manager:
|
||||||
|
|
||||||
```bash
|
```sh
|
||||||
cd bib
|
cd bib
|
||||||
yarn dev
|
yarn dev
|
||||||
```
|
```
|
||||||
|
@ -47,7 +47,7 @@ If all goes well, you should see this landing page:
|
||||||
|
|
||||||
###### Need help?
|
###### Need help?
|
||||||
|
|
||||||
If you run into any issues, join [our chatroom](https://discord.freesewing.org/) and
|
If you run into any issues, [join our **#development-help** chat room on on
|
||||||
we'll figure it out together.
|
Discord](https://discord.freesewing.org/) and we'll figure it out together.
|
||||||
|
|
||||||
</Note>
|
</Note>
|
||||||
|
|
12
markdown/dev/tutorials/pattern-design/structure/en.md
Normal file
12
markdown/dev/tutorials/pattern-design/structure/en.md
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
title: Files and folder structure
|
||||||
|
order: 110
|
||||||
|
---
|
||||||
|
|
||||||
|
With our development setup, let's take a moment to see what sort of files and
|
||||||
|
folders have been created for us, what they all mean, and where to find what.
|
||||||
|
|
||||||
|
You will find the following files and folders inside the newly created folder
|
||||||
|
that holds your development environment:
|
||||||
|
|
||||||
|
<Fixme compact>Update this for v3</Fixme>
|
Loading…
Add table
Add a link
Reference in a new issue