Flex

Documentation

How to get started?

Quick Start

Create a new Flex site:

gatsby new site arshad/gatsby-starter-flex

Start the development server

cd site
gatsby develop

You should now be able to view your site at http://localhost:8000.

Add a page

Create a page at content/pages/home/index.mdx and add the following to it:

---
title: Home
excerpt: Welcome to the home page
is_front: TRUE
---

This will create a new page and set it as the front page. If you head to http://localhost:8000, you should see Home displayed as the page title.

Add a block

Let's add a hero to the home page. Add the following to content/pages/home/index.mdx

---
title: Home
excerpt: Welcome to the home page
is_front: TRUE
---
<Hero
heading="Expedita Aperiam"
lead="Sint quaerat et occaecati voluptate illum tenetur."
imageUrl="https://via.placeholder.com/800x450"
style={{
bg: "muted"
}}
/>

It's that easy.

Available Blocks

Flex comes with a lot of pre-built blocks that you can use to build your site.

Cta, Div, Faqs, Feature, Hero, Logos, PageHeader, Section, Button, Card, Faq, Lead, Link, Logo, Image, Testimonial and many more.

Theming

Flex makes use of Theme UI under the hood. This makes it very easy to customize and re-use your theme across pages.

Customize the theme

Create a new file at src/gatsby-theme-flex/theme.js and add your custom theme values in there.

Let's change the default primary color.

// src/gatsby-theme-flex/theme.js
export default {
colors: {
primary: `#ee00ff`,
}
}

Stop and restart the development server: gatsby develop.

FAQs

We're still working on the documentation. But here's some quick answers to get you started.

Use Component Shadowing. Example, to override the Hero block, create the following file src/gatsby-theme-flex/blocks/hero.js and create your custom Hero block.

To customize the Header, create the following src/gatsby-theme-flex/layout/header.js.

Shadow the block and add your new props. For example, the following code adds a `foo` prop to the card block:
// src/gatsby-theme-flex/components/card.js
/** @jsx jsx */
import { jsx } from "theme-ui"
export default ({ style, heading, foo, children }) => {
...
{foo}
...
}

You can now use foo in your pages as follows:

<Card
heading="This is the heading"
foo="bar"
/>

Shadow the src/gatsby-theme-flex/blocks.js component and add the following code:

// src/gatsby-theme-flex/blocks.js
export * from "gatsby-theme-flex/src/blocks"
export { default as MyComponent } from "../my-component.js"
// src/my-component.js
/** @jsx jsx */
import { jsx } from 'theme-ui'
export default ({foo}) => (
<div>{foo}</div>
)

You can now use MyComponent in your pages:

<MyComponent foo="bar" />

© 2020 Flex. All rights reserved.