🎩 Brick user guide

This is your page to play with, and it is fully editable. Mess it up!

You can always access this page again at help.brick.do/guide.

Before you learn about how to use Brick, here's a short pitch. Brick is a minimalistic tool, so it's easy to miss what's exciting about it.

⭐️ What is good about Brick? Why not other note-taking apps? Why not a static site generator?

The primary reason is that Brick is explicitly designed to get people to write more. And so far our users report that it works!

Here are the tricks we have up our sleeves:

• All pages are anonymous and disconnected from each other — unless you nest them. So if you want to write something NSFW, or go into politics, etc, you can simply create a new top-level page and that's it. You don't have to register a new account in order to stay anonymous.
• You can play with the hierarchy without penalties — as long as you stay with autogenerated IDs, links to your pages won't break no matter how much you move them around.
• There is no separation between "done" and "not done" — the moment you start writing a page, it is already shareable. With static site generators and tools like git, it's easy to find yourself in editing hell, or with a folder of unfinished drafts that will forever remain drafts.
• Playing with design is fun — Brick is more customizable than most other tools. You can apply custom CSS to your pages, and you can insert HTML blocks. It's more fun to write in a tool that feels like yours, and it's especially fun when different mini-sites have drastically different designs. (See artyom.brick.do or freedom.brick.do for inspiration.)

Alright, and now you can go through the tutorial — or just create a new page and start writing!

🐵 Basics

• Click on New page in the sidebar on the left to create one more page.
• Type something instead of "Untitled" at the top of the page to give your page a title.
• Write something under the title — check out the Formatting section below for more details on how to style your writing.
• You can nest pages inside each other by dragging and dropping — and when you share a page, its parent will be shared as well. Create one more page and drag it inside the first one.
  • Delete a page by hovering over it in the sidebar, clicking the ••• options button, and choosing Delete page.

🥞 Formatting

Our editor has a lot of features — and we are working on more and more and more. Check out the features below to fully unleash our editor's power.

Shortcuts

Let's go through the most common shortcuts, just in case. They make life significantly easier.

• Ctrl+B for bold (or Cmd+B if you are using a Mac)
• Ctrl+I for italics
• Ctrl+K to add a link, or make the selected text a link — if you don't know what you want to link to, 🎵 Never Gonna Give You Up https://youtube.com/watch?v=dQw4w9WgXcQ is always an option
• Ctrl+Alt+1/2/3 to create a heading, and Ctrl+Alt+0 to turn it back into normal text
• Shift this checkbox to the right with Tab
  • And this one to the left with Shift+Tab
• Undo it with Ctrl+Z
• Complete this checkbox with Ctrl+Space
• Finally, press Shift+Enter to go to a new line without adding a paragraph break. Indispensable if you are writing poetry. Try it right here. Go on. This is a challenge. Write an actual poem.

Markdown shortcuts

• Headings
  Type # and follow with a space to create a heading. ## and ### will create smaller headings. Later we'll see how to change headings' design. Try in the empty space below.

• Lists
  Type * and follow with a space to create a list. 1. does a numbered list. Again, try in the empty space below.

• Quotes
  Type > and follow with a space to create a quote. Try in the empty space below.

• Code
  Type ``` and follow with a space to create a code block. Try in the empty space below.
• Oh, and then press Enter twice to get out of the code block. If you want two blank lines in a code block, you will have to use Shift+Enter.

Images

There are several ways to add images:

• you can copy the image and paste it here with Ctrl+V (especially easy for screenshots),
• or you can go to the ¶ panel and press the image button to upload a file from your computer,
• or you can drag and drop images into the editor.

• Paste any image in the empty space below.

Fun features

• Highlighting
  It is much easier to grab people's attention when you highlight bits of text — especially in long quotes. Select this sentence and press the highlighter button in the panel above to make it all yellow.

• Videos and other embeds
  In the empty space below, open the ¶ panel and press the button with a video frame on it. Paste a YouTube video link or a tweet — it will be added to the page. This also works with Google Maps and a few other things.

• Custom HTML
  In the empty space below, open the ¶ panel and press the button with "HTML" on it. Put <marquee>wheeeee</marquee> inside it. Save. Press Show preview in the upper right corner. Enjoy!

• Tables
  In the empty space below, open the ¶ panel and press the button that looks like a table. It will insert a table! Okay. Can't think of anything to do with a table, but sometimes it's useful.

🍟 Sharing and publishing

• All your pages are instantly published. Copy the address from the address bar, or just click the Copy public link button in the right corner of the page, and share it with friends. When you share a page with someone, they will also see all pages in its tree — but none of your other pages. Try it now! 
• You can see how the page will look when shared, by opening it in "incognito mode" or "private mode" in your browser.
• You can set up a brick.do subdomain for any page, or you can connect your own domain (a premium feature). Hover on this page, click the ••• button, then Add domain and follow the instructions.
• Pages with subdomains (or custom domains) can also have custom paths instead of long alphanumeric IDs. After you have done the previous step, create a new page inside this one, click the ••• button and choose Custom link. 
  After setting custom link you can try  Copy public link   again. The previous alphanumeric ID link will still work, of course.
   

🎨 Styling

Brick provides infinite styling possibilities with the power of adding custom CSS to your pages.

• Hover over this page in the sidebar and click on the ••• options button. Then click Custom CSS. Copy the theme below, save, and see how the page transforms!

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Staatliches&display=swap');

h1, h2, h3, h4 {
  font-family: 'Staatliches';
  text-align: center !important;
}
h2, h3, h4 {
  margin-top: 2em;
}
.page a, .page .page-link, .page-title {
  color: rgb(232, 23, 92); 
}
.page-title {
  font-size: 280%;
  line-height: 115%;
}
.page-title::before { content: '❖ '; }
.page-title::after  { content: ' ❖'; }
.page {
  font-family: 'Lato';
  font-size: 130%;
}

Custom CSS will be automatically applied for all children pages, unless they have their own style.

• Hover over this page in the sidebar, click •••, then Add page inside and write something to see that styles are inherited.
• Copy the style above into the child page's Custom CSS setting, modify it a bit, and save.

How to colorize

CSS supports different color formats: rgb, rgba, hex, hsla. You can use any format you like.

color.hailpixel.com is a great and easy to use color picker which provides hex codes you can use in CSS right away.

• To change color of text, use the color property. Try it on the current page.

.page {
  color: #142A3D;
}

• To add color to background use the background property. Try it on the current page.

.page {
  background: #ABCDE3;
}

How to add fonts from Google Fonts

Open fonts.google.com and click on any font you like.

Select the weights you want to include for your page (usually just 400, for regular text, and 600 for bold):

Choose the @import radiobox in the right sidebar:

Copy the content of the <style> tag:

Open Custom CSS settings of any page and paste the copied @import on top.

Go back to Google Fonts and copy the CSS rule for your font:

Add the copied CSS rule to any element you want. To use font for everything at the page paste the rule inside the .page selector:

.page {
  font-family: 'JetBrains Mono', monospace;
}