Last active
April 21, 2022 03:47
-
-
Save pascalandy/88220587af37ae455c53a56564ce4969 to your computer and use it in GitHub Desktop.
Markdown sources. Search for « Style guide » on live demos from https://play-with-ghost.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| <a id="sources"></a> | |
| ## Markdown sources | |
| **From this point, everything you see is formatted using Markdown syntax.** It will work in every editor that supports Markdown because it's an open standard on the web. There are two ways to find the sources for this page. | |
| #### 1. On GitHub | |
| We maintained a gist [on GitHub](https://gist.github.com/pascalandy/88220587af37ae455c53a56564ce4969#file-style-guide-raw-txt). | |
| #### 2) On play-with-ghost | |
| 1. Go to [play-with-ghost](https://play-with-ghost.com/) | |
| 2. Select a live demo like [FirePress Klimax1](https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/) | |
| 3. Click the button `admin panel` | |
| 4. Log in with these credentials `relations@firepress.org / firepress1` | |
| 5. In Stories' section, look for the post `Style guide` | |
| 6. There you go, the source is available to you ✨ | |
| Let's start 🚀🚀🚀 , shall we? | |
| --- | |
| <a id="styling101"></a> | |
| ## Styling 101 <i class="fas fa-paint-brush"></i> | |
| **This is bold** and this is *italic*. You can create an *absolute* link [like this one](https://twitter.com/askpascalandy). You can create a *relative* link to pages and posts within your [own website](../style-guide/). | |
| Sometimes you want to have your visitor open a **link into a new tab**. This is where you can <a href="https://twitter.com/askpascalandy" target="_blank">find me on Twitter</a> | |
| Everyone loves straight to the point **bullet points**: | |
| - The first rule is: Be honest | |
| - The second rule is: See rule number one | |
| - Rule number #3 should be here too | |
| **Fancy elements**: | |
| The <s>s element</s> example | |
| The <mark>mark element</mark> example | |
| The <samp>samp element</samp> example | |
| The <small>small element</small> example | |
| The <sub>sub element</sub> example | |
| The <sup>sup element</sup> example | |
| The <kbd>kbd element</kbd> example | |
| **Horizontal bar** is made by using three minus signs `---`. | |
| --- | |
| <a id="image"></a> | |
| ## Image <i class="far fa-image"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
|  | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| ## Clickable image | |
| We need two things: a URL and a picture. Here is [how you can do it](https://firepress.org/en/how-to-make-an-image-clickable-with-markdown/) step-by-step. | |
| [](https://twitter.com/askpascalandy) | |
| --- | |
| <a id="headertitle"></a> | |
| ## Header (title) | |
| Living without those beautiful headers would be impossible. | |
| # Header h1 | |
| ## Header h2 | |
| ### Header h3 | |
| #### Header h4 | |
| ##### Header h5 | |
| ###### Header h6 | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| --- | |
| <a id="listnumbered"></a> | |
| ## List numbered <i class="fas fa-list-ul"></i> | |
| It looks like all the cool kids are trusting Ghost as their CMS (content management systems). Here a few of them: | |
| 1. The dating app [Tinder](http://blog.gotinder.com/) | |
| 2. The analytic app [Fullstory](https://blog.fullstory.com/) | |
| 3. StackOverflow and Discourse founder's blog [Codinghorror](https://blog.codinghorror.com/) | |
| 4. Jannis is a cool coder [blog](https://jann.is/ipad-pro-for-programming/) | |
| 5. Discover what Ghost can do on [Play With Ghost](https://play-with-ghost.com/) | |
| Here is an unordered list: | |
| - I'm building & bootstraping **FirePress**. You can see [why here](https://firepress.org/en/why-launching-your-next-website-with-firepress/) | |
| - You can see checkout [play-with-ghost](https://play-with-ghost.com/). | |
| - See the **public roadmap** [on Trello](https://trello.com/b/0fCwwzqc/firepress-roadmap) | |
| - As a **developer** I tackle these [challenges](https://firepress.org/en/technical-challenges-we-are-facing-now/) every day. | |
| - point a | |
| - point b | |
| - point c | |
| - Do you have the soul of an **early adopter**? The beta is [open for you](https://firepress.org/en/10-day-free-trial/) | |
| --- | |
| <a id="blockquote"></a> | |
| ## Blockquote | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| > Based on the cuisine of medieval. Muffins, foods that were used widely in combination with variations. Combine that are harvested at that mysteriously rich, sweet and political changes for this cake. <cite>— [HAL 9000](http://en.wikipedia.org/wiki/HAL_9000)</cite> | |
| Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| --- | |
| <a id="embed"></a> | |
| ## Embed content | |
| Embed are easy to insert in your website. | |
| #### YouTube <i class="fab fa-youtube-square"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/NikceQYbaBY" frameborder="0" allowfullscreen></iframe> | |
| <br>This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| #### Vimeo <i class="fab fa-vimeo-square"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <iframe src="//player.vimeo.com/video/103224792?title=0&byline=0&portrait=0" width="600" height="338" | |
| frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| <br>This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| #### SoundCloud <i class="fab fa-soundcloud"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141047724&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> | |
| <br>This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| #### Github <i class="fab fa-github-square"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <script src="https://gist.github.com/pascalandy/eae469aa673862bb7158d5e161569a82.js"></script> | |
| <br>This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| #### Slides <i class="fab fa-slideshare"></i> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <iframe src="//www.slideshare.net/slideshow/embed_code/key/e8apLGIsmfqmZU" width="595" height="485" frameborder="0" | |
| marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" | |
| allowfullscreen> </iframe> | |
| <br>This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| --- | |
| <a id="button"></a> | |
| ## Buttons | |
| Everyone love buttons! As there are so many options, we decided to create three button styles. | |
| Use them as a **call to action** to get a maximum effect. | |
| <a id="button-style-1"></a> | |
| #### Button Style #1 | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Standard size** | |
| <a class="btn_c pink gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c blueGray gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c blue gradient" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Small size** | |
| <a class="btn_c small pink gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c small blueGray gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c small blue gradient" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Icons** | |
| <a class="btn_c pink gradient" href="#icons-font-awesome"><i class="fas fa-coffee"></i> Click Here</a> | |
| <a class="btn_c blueGray gradient" href="#icons-font-awesome"><i class="fas fa-bell"></i> Click Here</a> | |
| <a class="btn_c blue gradient" href="#icons-font-awesome"><i class="fas fa-pizza-slice"></i> Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Round** | |
| <a class="btn_c pink round gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c blueGray round gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c blue round gradient" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Wide** | |
| <a class="btn_c blue wide gradient" href="https://firepress.org/">Schedule an appointment</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Colors** | |
| <a class="btn_c pink gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c blueGray gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c blue gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c brown gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c gray gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c cyan gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c teal gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c green gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c lightGreen gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c purple gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c lime gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c yellow gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c amber gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c orange gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c deepOrange gradient" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_c purple gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c deepPurple gradient" href="https://firepress.org/">Click Here</a> <a class="btn_c indigo gradient" href="https://firepress.org/">Click Here</a> | |
| <br><br> | |
| <a id="button-style-2"></a> | |
| #### Button Style #2 | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Standard size** | |
| <a class="btn_a primary" href="https://firepress.org/">Buy Tickets</a> | |
| <a class="btn_a" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Small size** | |
| <a class="btn_a small primary" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_a small" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Large size** | |
| <a class="btn_a primary large" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_a large" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Fit size (wide)** | |
| <a class="btn_a primary fit" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_a fit" href="https://firepress.org/">Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Icons** | |
| <a class="btn_a primary" href="#icons-font-awesome"><i class="fas fa-coffee"></i> Click Here</a> | |
| <a class="btn_a" href="#icons-font-awesome"><i class="fas fa-bell"></i> Click Here</a> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. **Disabled** | |
| <a class="btn_a primary disabled" href="https://firepress.org/">Click Here</a> | |
| <a class="btn_a disabled" href="https://firepress.org/">Click Here</a> | |
| --- | |
| <a id="codeblock"></a> | |
| ## Code block <i class="fas fa-code"></i> | |
| Useful to share snippets or a piece of code. | |
| ``` | |
| <style> | |
| // Menu font size {} | |
| .site-nav { | |
| font-size: 1.4rem; | |
| height: 40px; | |
| } | |
| // Title size {} | |
| h1 { | |
| font-size: 4.5rem; | |
| } | |
| // Title color {} | |
| .post-full-title { | |
| margin: 0; | |
| color: #ffffff; | |
| } | |
| // Logo size {} | |
| img.site-logo { | |
| max-height: 12vw !important; | |
| } | |
| // Main image roudness {} | |
| .post-full-image { | |
| border-radius: 0px 0px 6px 6px; | |
| } | |
| // Main content section roudness {} | |
| .post-full-content { | |
| border-radius: 6px 6px 0px 0px; | |
| } | |
| </style> | |
| ``` | |
| **Inline code block**: This text is used as a placeholder. `<i class="fas fa-code"></i>` Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| --- | |
| <a id="table"></a> | |
| ## Table & Grid <i class="fas fa-table"></i> | |
| There are three ways to create a table. We recommand to use the first or second method. | |
| 1. **Grid table** | |
| 2. **Markdown table** | |
| 3. **HTML table** | |
| <br> | |
| ## 1) Grid table | |
| The **best way** to create a complex table is to use the grid system. We use [this | |
| one](http://thisisdallas.github.io/Simple-Grid/). Below, is a classic **pricing table** with a ratio of: `10/12` on the | |
| left and `2/12` on the right. | |
| <br><br> | |
| ### Our Pizzas | |
| <br> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>The Montréal Special</strong><br> | |
| <em>Fresh basil, mozzarella and olive oil, mozzarella di buffala (+$4), Anchovies (+ $1)</em> | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>$21</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>Quattro Formaggi</strong><br> | |
| <em>Mozzarella, Aosta Valley fontina, parmesan and spicy provolone</em> | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>18$</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>The Meat Lover</strong><br> | |
| <em>Fresh basil, Prosciutto crudo, mozzarella and arugula</em> | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>24$</strong> | |
| </div> | |
| </div> | |
| </div> | |
| --- | |
| ### Corporate services | |
| Let's go deepter. See how we use ` ` (non breakable space) in order to create a *whitespace* in the two tables | |
| below: | |
| <br> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>The Blue plan includes:</strong><br> | |
| 🎨 Publish original content on 3 social networks<br> | |
| 🎨 Once a day<br> | |
| 🎨 5 days a week<br> | |
| 🎨 Billed each month | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>$1475</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>The Green plan includes:</strong><br> | |
| <i class="far fa-check-square"></i> Publish original content on 3 social networks<br> | |
| <i class="far fa-check-square"></i> Twice a day<br> | |
| <i class="far fa-check-square"></i> 5 days a week<br> | |
| <i class="far fa-check-square"></i> Billed each month | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>$2495</strong> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| #### Going fancy | |
| Without whitespaces (using ` `), it's not as cute. | |
| <br> | |
| <div class="grid"> | |
| <div class="col-10-12 mobile-col-10-12"> | |
| <div class="content"> | |
| <strong>The purple plan includes:</strong><br> | |
| <i class="far fa-check-square"></i> Publish original content on 3 social networks<br> | |
| <i class="far fa-check-square"></i> Twice a day<br> | |
| <i class="far fa-check-square"></i> 5 days a week<br> | |
| <i class="far fa-check-square"></i> Billed each month | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content push-right"> | |
| <strong>$2495</strong> | |
| </div> | |
| </div> | |
| </div> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <br> | |
| --- | |
| ## 2) Markdown table | |
| A more straightforward way to create tables is to use Markdown. | |
| **Allignement:** the description is on the left, the price is on the right | |
| | Description | Price | | |
| | :-----------------------------| ----: | | |
| | Black top pomade | $25 | | |
| | Fiber pomade | $20 | | |
| | Free form cream | $24 | | |
| | Matte pomade paste | $24 | | |
| <br> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| **Allignement:** description is left, price is left | |
| | Description | Price | | |
| | :-----------------------------| :--- | | |
| | Black top pomade | $25 | | |
| | Fiber pomade | $20 | | |
| | Free form cream | $24 | | |
| | Matte pomade paste | $24 | | |
| <br> | |
| Here is an example with **three** columns. | |
| | Name | Details | Cost | | |
| | ------------- | :------------: | -----:| | |
| | col 3 is | right-aligned | $1600 | | |
| | col 2 is | centered | $12 | | |
| | zebra stripes | are neat | $1 | | |
| <br> | |
| Here is an example with **four** columns. You see that you don't have to align your Markdown perfectly to export a beautiful table. | |
| | Fistname | Lastname | City | Age | | |
| | :------------ | :--------------| :-----------| :----| | |
| | Jimmy | Row | Montréal | 26 | | |
| | Martine | Nadal | Québec | 32 | | |
| | Philippe | Green | Seatle | 43 | | |
| | Mary | Woodstock | Edmunston | 22 | | |
| <br> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| <br> | |
| --- | |
| ## 3) HTML table | |
| The third way of creating a table is with pure HTML. | |
| ### Variation A | |
| <table width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Firstname</th> | |
| <th>Lastname</th> | |
| <th>Age</th> | |
| </tr> | |
| </thead> | |
| <tr> | |
| <td>Jill</td> | |
| <td>Smith</td> | |
| <td>50</td> | |
| </tr> | |
| <tr> | |
| <td>Eve</td> | |
| <td>Jackson</td> | |
| <td>94</td> | |
| </tr> | |
| </table> | |
| <br> | |
| ### Variation B | |
| <table width="100%"> | |
| <tbody> | |
| <tr> | |
| <td style="width:72%;">Item green</td> | |
| <td>$19</td> | |
| </tr> | |
| <tr> | |
| <td style="width:28%;">Item red</td> | |
| <td>$24</td> | |
| </tr> | |
| <tr> | |
| <td>Item yellow</td> | |
| <td>$1500</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| ### Variation C | |
| <table width="100%"> | |
| <tbody> | |
| <tr> | |
| <td style="width:50%;"> | |
| <h4>Participants</h4> | |
| </td> | |
| <td style="width:50%;"> | |
| <h4>Teams</h4> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Mark Mellon</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Jimmy Rown</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Martin Flow</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Suzie Holly</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Sam Grant</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Abigail Thorn</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The Crushers</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Tony Lopp</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Maria Ossy</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Clumsy Rhino</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Alex More</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Julia BLoom</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| <tr> | |
| <td style="width:50%;">Karl Hats</td> | |
| <td style="width:50%;"><a class="btn_c blue gradient" href="https://firepress.org/">The White Bears</a></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| --- | |
| <a id="icons-font-awesome"></a> | |
| ## We love icons <i class="far fa-heart"></i> | |
| You have access to more than [1400 free icons](https://fontawesome.com/icons) thanks to the folks at Font Awesome. | |
| You can **find free icons** directly on [Font Awesome](https://fontawesome.com/). | |
| Let's say you are looking for a **camera** icon. By using this snippet: | |
| ``` | |
| you will see: <i class="fas fa-camera-retro"></i> | |
| ``` | |
| you will see: <i class="fas fa-camera-retro"></i> | |
|  | |
| #### Size | |
| <div class="grid"> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: standard<br> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| </div> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: large<br> | |
| <i class="fas fa-camera-retro fa-lg"></i> | |
| </div> | |
| </div> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: 2x<br> | |
| <i class="fas fa-camera-retro fa-2x"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid"> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: 3x<br> | |
| <i class="fas fa-camera-retro fa-3x"></i> | |
| </div> | |
| </div> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: 4x<br> | |
| <i class="fas fa-camera-retro fa-4x"></i> | |
| </div> | |
| </div> | |
| <div class="col-4-12 mobile-col-4-12"> | |
| <div class="content center"> | |
| Size: 5x<br> | |
| <i class="fas fa-camera-retro fa-5x"></i> | |
| </div> | |
| </div> | |
| </div> | |
| #### Rotation | |
| <div class="grid"> | |
| <div class="col-3-12 mobile-col-3-12"> | |
| <div class="content center"> | |
| <i class="fas fa-snowman fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-3-12"> | |
| <div class="content center"> | |
| <i class="fas fa-snowman fa-rotate-90 fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-3-12"> | |
| <div class="content center"> | |
| <i class="fas fa-snowman fa-rotate-180 fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-3-12"> | |
| <div class="content center"> | |
| <i class="fas fa-snowman fa-rotate-270 fa-2x"></i> | |
| </div> | |
| </div> | |
| </div> | |
| #### Animation | |
| <div class="grid"> | |
| <div class="col-3-12 mobile-col-2-12"> | |
| <div class="content center"> | |
| <i class="fas fa-spinner fa-spin fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-2-12"> | |
| <div class="content center"> | |
| <i class="fas fa-cog fa-spin fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-2-12"> | |
| <div class="content center"> | |
| <i class="fas fa-circle-notch fa-spin fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-3-12 mobile-col-2-12"> | |
| <div class="content center"> | |
| <i class="fas fa-sync fa-spin fa-2x"></i> | |
| </div> | |
| </div> | |
| <div class="col-2-12 mobile-col-2-12"> | |
| <div class="content center"> | |
| | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| --- | |
| <a id="emoji-and-emoticon"></a> | |
| ## Emoji (emoticon) <i class="far fa-smile-wink"></i> | |
| | | | | |
| | :-- | :-- | | |
| | 🔥 📰 FirePress | 🙌 blessed | | |
| | 😂 LOL | 😊 smiling | | |
| | 😊 smiling | 🤔 thinking | | |
| | 🤔 thinking | ✨ star | | |
| | 🚀 launch | 😂 LOL | | |
| | ⚡️ lightning | ❤️ heart | | |
| | 👍 Thumbs Up | 🙈 damm me | | |
| | 🇨🇦 Canada flag | 🎨 design | | |
| | 💥 bamm | 🦄 licorn | | |
| | 🛠 parameters | 🔥 fire | | |
| | 🎉 hell yeah | 🙌 blessed | | |
| | ⚠️ warning| 🚫 stop | | |
| See them all on [getemoji.com](https://getemoji.com/). | |
| --- | |
| <a id="form"></a> | |
| ## Form | |
| There are many ways to embed a form into your website. The classic use case is to have a **contact us** form. | |
| ### Option #1 | formspree | |
| [formspree](https://formspree.io/) is the most straightforward way to have a form on any website. Use the code below and use your email. In this example we use `youremail@here.com`. formspree will send you an email to confirm your email and you will start to receive your messages. | |
| <form method="POST" action="https://formspree.io/youremail@here.com"> | |
| <div><input type="email" name="email" placeholder="Your email"></div><br> | |
| <div><textarea name="message" placeholder="Your message"></textarea></div><br> | |
| <button class="btn_a primary" type="submit">Submit</button> | |
| </form> | |
| <br> | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. | |
| ### Option #2 | third party service | |
| You can also use a third party service like [Wufoo](https://www.wufoo.com/) or [Typeform](https://www.typeform.com/). | |
| <iframe height="401" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="https://firepressorg.wufoo.com/embed/zyr0snn1ad9rvs/"> | |
| </iframe> | |
| This is a placeholder text to give context. You are about to read words that won't make sense, and this is fine. At the moment, the goal is to build a structure for our site. | |
| ### Option #3 | via your CRM | |
| Maybe you want something more organized than a simple email. What about having all your messages going thru a CRM? [See this example](https://support.airtable.com/hc/en-us/articles/206058268-How-to-create-a-form-with-Airtable) by Airtable. | |
| --- | |
| <a id="anchor"></a> | |
| ## Anchor <i class="fas fa-anchor"></i> | |
| Very practical when you want your user to navigate within a big page. We usually use it to create a **Table of content**. How use anchors on https://firepress.org/en/faq/. | |
| * [Footnotes section](#footnotes) | |
| * [Code Block](#codeblock) | |
| * [Start your trial](#trial) | |
| --- | |
| <a id="footnote"></a> | |
| ## Footnote <i class="fas fa-check"></i> | |
| Using a footnote is a great way to credit or reference something in your content [^1]. Most people use it when they have a lot of references in their content [^2]. | |
| This text is used as a placeholder. Words that will follow won't make any sense and this is fine. From FirePress FAQ's section [^3], we can understand that the goal is to build a structure for our site. | |
| [^1]: https://en.wikipedia.org/wiki/Nelson_Mandela | |
| [^2]: https://en.wikipedia.org/wiki/Content | |
| [^3]: https://firepress.org/en/faq/ | |
| --- | |
| <a id="redirection"></a> | |
| ## Redirect traffic to a new page <i class="fas fa-directions"></i> | |
| This is a pure HTML trick. Redirect the traffic from a webpage to another one is useful in cases you want to **rename** a page. | |
| For example, you have two pages: **A** is your old page, **B** is your new page. Instead of renaming page **A**, create a new page **B** and use this script on page **A** to redirect traffic on page **B**. | |
| This way, the traffic that is still pointing to page **A** doesn't break, and page **B** will be loaded. | |
| Create an HTML card and use this script below: | |
| ``` | |
| The content on: https://firepress.org/about is now here: | |
| https://firepress.org/en/tag/about/ | |
| (You will be redirected automatically in few seconds.) | |
| <script type="text/javascript"> | |
| window.location.href = "https://firepress.org/en/tag/about/" | |
| </script> | |
| ``` | |
| --- | |
| <a id="character"></a> | |
| ## Latin Character check <i class="far fa-keyboard"></i> | |
| These are the most common Latin characters. It ensures this theme supports them and that everything renders smoothly. | |
| , - . / 0 1 2 3 4 | |
| 5 6 7 8 9 : ; > = < | |
| ? @ A B C D E F G H | |
| I J K L M N O P Q R | |
| S T U V W X Y Z [ | |
| ] ^ _ a b c d e f | |
| g h i j k l m n o p | |
| q r s t u v w x y z | |
| { | } ~ ! " # $ % & | |
| ‘ ( ) * | |
| --- | |
| <a id="trial"></a> | |
| ## Try Ghost <i class="far fa-smile"></i> | |
| **Are you considering Ghost to build your next website?** Sign-up today to get your [free 10-Day trial](https://firepress.org/en/10-day-free-trial/). We will take care of your project with our fully managed hosting service. The hosting is provided by FirePress, the official play-with-ghost's sponsor. | |
| Is there something to fix or to improve? If so, please buzz us [on Github](https://gist.github.com/pascalandy/88220587af37ae455c53a56564ce4969#gistcomment-2628194) or [on Twitter](https://twitter.com/askpascalandy) and I'll update it! | |
| Thanks for being curious and we can't wait to see what you will create with your website. | |
| — The FirePress Team 🔥📰 |
Quickly see how it looks on:
https://play-with-ghost.com/live-demo-firepress-london-for-barbershops/style-guide/
- Does this markdown Style guide is missing something?
- Did you see a glitch?
- Is there something to fix?
Please buzz me on Github or on Twitter and I'll update it!
Thank for being curious, and I can't wait to see what you will create with your website.
— Pascal Andy
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sometimes the Koenig editor is too basic to format particular element you need. Time to unveil the options you have when using the Markdown syntax.
We built this page as the most exhaustive markdown reference you can find on the web. If something is missing, please let me know in the comment below! The idea here is that you can easily copy-paste those snippets in your own content.
You probably won't need everything shown below but remember, it is here if you ever need it. The purpose of the content below is to show you how you can style your content with Ghost. Head over to FirePress FAQ section for more resources.
On play-with-ghost.com, each live demos have a post labeled as « styling guide ». It will help you see how the content is rendering in a variety of themes. By the way, the theme is responsible for managing how the content looks like on your Ghost site.