New open-source Ghost themes


#1

We've shipped three shiny new Ghost themes to the Marketplace that are ready to use, fully open-source, free and extensible. Plus: a new starter theme for developers!


This is a companion discussion topic for the original entry at https://blog.ghost.org/free-ghost-themes/

#2

Hell yeah !!


#3

Hi Kym,

I really enjoy London! Over https://london.ghost.io/elements/ we can see styles.

Would you share the source of this page? I’m particularly curious about re-creating the:

  1. the Buttons
  2. the forms
  3. the grid system

These elements were quite missing from the previous theme :slight_smile: Can’t wait to use them. Thank you!


#4

Hey, the London theme is free and fully open source, there are links to all of the downloads in the blog post attached to this thread. You can download the London theme here.


#5

Hi again,
I’m aware that I can download the theme :slight_smile: What I’m asking here is the source that made the element page possible. I guess we need to use the HTML and/or Markdown card in Koenig. There is no doc about using these elements.

How can we recreate these?

1) Button

2) Forms

3) Grid

Thanks!


#6

Hey again!

The styling for these elements is available in the repository for the London theme and if you inspect the HTML of the elements page you mentioned you can see how the page has been built.

You can use these elements on pages directly in your theme files, or you could also use a HTML card in the editor as you mentioned. Since the elements of a Ghost theme vary so much, there’s no specific documentation for this.


#7

This is just amazing :heart_eyes: :tada:

I have a quick question: is there a demo of the new starter theme for developers anywhere? I know it’s designed to run locally and develop your own theme but I am just curious what it looks like out of the box :thinking:

Thanks again for everyone’s amazing work :tada:


#8

The starter was built using the London theme as a foundation. There’s no demo site, as it’s not intended to be used out of the box but rather as a framework for developers to build on top of :smile:


#9

Here is what I was looking for.

Markdown edition :slight_smile:

# Button

Everyone love buttons! Use them as a **call to action**.

### button primary

<a href="https://pascalandy.com/" class="button primary">See my blog</a>

```
<a href="https://pascalandy.com/" class="button primary">See my blog</a>
```

### button primary (with an icon)

<a href="https://pascalandy.com/" class="button primary"><i class="fas fa-fire"></i>&nbsp;&nbsp;See my blog</a>

### button

<a href="https://pascalandy.com/" class="button">See my blog</a>

### button primary large

<a href="https://pascalandy.com/" class="button primary large">See my blog</a>

### Button small

<a href="https://pascalandy.com/" class="button small">See my blog</a>

### button primary fit

<a href="https://pascalandy.com/" class="button primary fit">See my blog</a>

### button fit

<a href="https://pascalandy.com/" class="button fit">See my blog</a>

### button primary fit small

<a href="https://pascalandy.com/" class="button primary fit small">See my blog</a>

### button fit small

<a href="https://pascalandy.com/" class="button fit small">See my blog</a>

### button primary disabled

<a href="https://pascalandy.com/" class="button primary disabled">See my blog</a>

### button disabled

<a href="https://pascalandy.com/" class="button disabled">See my blog</a>