Vapor's Design Guide

Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites

Introduction

This site contains Vapor's Design Guide showing examples of different components used in web pages. Evetually, this design guide will be rolled out across all of Vapor's sites, old and new.

The designs have been developed in conjunction with Red Bourbon who have created some amazing designs for us. The code for this site, the design guide and the reference designs can be found on GitHub.

Originally this page was a proof on concept for building the blog (the first site to be ported over to the new design) as a way of getting the styling and HTML/CSS to work. It's now evolved to host the generated CSS and JS the sites can pull in, this example site, all the static files (like images) and components for Publish to use when building out sites.

Some Vapor code blocks

Here's an example of a code block:

          // This is a comment
struct CreateTodoTitleIndex: AsyncMigration {
  func prepare(on database: Database) async throws {
      try await (database as! SQLDatabase)
          .create(index: "todo_index")
          .on("todos")
          .column("title")
          .run()
  }

  func thisIsALongLineOfCodeToTestHowWeDealWithBiggerLinesOfCode(something somethingeElse: MySuperLongType) async throws -> MyOtherType {
      fatalError()
  }

  func revert(on database: Database) async throws {
      try await (database as! SQLDatabase)
          .drop(index: "todo_index")
          .run()
  }
}
          
        

And then we have some inline code: let vaporIsAwesome = true

And now a quote:

“Hendrerit amet nibh dui ut in feugiat pellentesque. Sed consectetur blandit lectus arcu lacus libero diam. Nulla turpis etiam non et, adipiscing. Egestas at vitae, at purus accumsan fermentum. Sed quis sed nulla malesuada.""

And finally a list:

  1. Lectus id duis vitae porttitor enim gravida morbi.
  2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.
  3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.

Vapor's Design Guide

Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites

Introduction

This site contains Vapor's Design Guide showing examples of different components used in web pages. Evetually, this design guide will be rolled out across all of Vapor's sites, old and new.

The designs have been developed in conjunction with Red Bourbon who have created some amazing designs for us. The code for this site, the design guide and the reference designs can be found on GitHub.

Originally this page was a proof on concept for building the blog (the first site to be ported over to the new design) as a way of getting the styling and HTML/CSS to work. It's now evolved to host the generated CSS and JS the sites can pull in, this example site, all the static files (like images) and components for Publish to use when building out sites.

Some Vapor code blocks

Here's an example of a code block:

          // This is a comment
struct CreateTodoTitleIndex: AsyncMigration {
  func prepare(on database: Database) async throws {
      try await (database as! SQLDatabase)
          .create(index: "todo_index")
          .on("todos")
          .column("title")
          .run()
  }

  func thisIsALongLineOfCodeToTestHowWeDealWithBiggerLinesOfCode(something somethingeElse: MySuperLongType) async throws -> MyOtherType {
      fatalError()
  }

  func revert(on database: Database) async throws {
      try await (database as! SQLDatabase)
          .drop(index: "todo_index")
          .run()
  }
}
          
        

And then we have some inline code: let vaporIsAwesome = true

And now a quote:

“Hendrerit amet nibh dui ut in feugiat pellentesque. Sed consectetur blandit lectus arcu lacus libero diam. Nulla turpis etiam non et, adipiscing. Egestas at vitae, at purus accumsan fermentum. Sed quis sed nulla malesuada.""

And finally a list:

  1. Lectus id duis vitae porttitor enim gravida morbi.
  2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.
  3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.

Component Guide

Typography

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Pagination

HR


Blog Post Cards

This is a longer post

Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.

This is a longer post

Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.

Vapor's Design Guide

Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites

Blog Site Title

Articles, tools & resources for Vapor devs

Blog Tag List

This is a list on desktop and a drop down menu on mobile