Installation

Quick start guide for installing and configuring the Flamingo starter framework.

1 Install Gridsome

To use the Flamingo framework you need the Gridsome-CLI tool:


# Via npm
npm install --global @gridsome/cli

# Via yarn
yarn global add @gridsome/cli
        

2 Get Flamingo

Installing the Flamingo framework can be done in the following two ways, npm and Github.


# Via Gridsome-CLI gridsome
create flamingo-starter

# Via github
git clone git@github.com:sir-red-dab/flamingo-docs.git
        

3 Change Project Name

It is recommended to change the name of the project. This can be done in two files: gridsome.config.js and package.json.

4 Install Dependencies

To use the Flamingo framework it's important that you install the packages. This can be done using npm or yarn.


# Install with npm
npm install

# Install with yarn
yarn install
        

5 Tailwind Configuration

Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind. By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.


// Example `tailwind.config.js` file

module.exports = {
  purge: false,
  theme: {
    screens: {
      sm: "568px",
      md: "768px",
      ml: "998px",
      lg: "1024px",
      xl: "1280px"
    },
    colors: {
      black:    "#111",
      white:    "#fff",
      primary:  "#e94c61"
    },
    backgroundColor: theme => theme("colors"),
    fontFamily: {
      sans: ["Poppins", "system-ui", "-apple-system", "sans-serif"],
    },
    fontSize: {
      base: "18px",
      h1:   "65px",
      h2:   "45px",
      h3:   "28px"
    },
    fontWeight: {
      light:      "300",
      normal:     "400",
      medium:     "500",
      semibold:   "600",
      bold:       "700",
      extrabold:  "800",
      black:      "900"
    },
    lineHeight: {
      tight:  1.1,
      normal: 1.2,
      loose:  1.3
    }
  },
  variants: {},
  plugins: [],
  corePlugins: {
    placeholderColor: false
  }
}
        

6 Start Building

After everything is setup, you can start building you event site. Gridsome has two commands that we use to build our site:


# Gridsome develop is to watch the changes
gridsome develop

# Gridsome build is to compile all the files for production
gridsome build