/prototype-template

A template for creating prototypes

Primary LanguageCSS

Netlify Status

Prototype Template

This is a template for creating prototypes. If you wish to use it, please download or fork this repo.

Features

Built with PatternFly, the open source design system from Red Hat.

If you do not want to use PatternFly, update the following file:

  • sass/site.scss

    • Edit the file to change from $global-load-patternfly: true !default; to $global-load-patternfly: false !default;.

    This will tell the build to not load the PatternFly files and instead load the empty base.min.css file for customization.

Customization

  1. Decide whether you want to use PatternFly 4 as your base, or a fully customized UI.

  2. For a PatternFly 4 base, see Features for building.

  3. For a fully customized UI, you will want to update the various imports and files associated/linked to sass/base.scss.

    • To start, base.scss pulls in a variables and utilities file. Edit these files (or add more to base.scss) to build out your UI.

Site configuration

This site is built using a shared header.pug file and a shared navigation.pug file.

The header.pug file sets the Page title, Favicon, Manifest, and CSS file(s). By default, site.min.css is the only CSS file referenced in the header.

The navigation.pug file controls the navigation layout and content.

  assets/
    images/
  css/
    assets/
      fonts/
        webfonts/
          *.eot
          *.svg
          *.tff
          *.woff
          *.woff2
    base.css
    base.min.css
    patternfly.min.css
    site.css
    site.min.css
  js/
    site.js
  sass/
    utilites/
      _all.scss
      _typography.scss
    variables/
      _all.scss
    base.scss
    site.scss
  src/
    includes/
      header.pug
      navigation.pug
    index.pug

When building the site using Travis or Netlify (or by manually publishing), gulp build will created dist/ folder, which will contain the following files:

  dist/
    assets/
      images/
    css/
      assets/
        fonts/
          webfonts/
            *.eot
            *.svg
            *.tff
            *.woff
            *.woff2
      base.min.css
      patternfly.min.css
      site.min.css
    js/
      site.js
    index.html
    manifest.json
    favicon.ico
    favicon.png
    package.json
    README.md

To run a complete build with release, run gulp && gulp build in your prompt.

Build Features

  • Compile Pug to HTML
  • Compile SCSS to CSS
  • Copy Font Awesome webfonts to local environment
  • Browsersync for local development
  • Notifications on successful builds (you can turn this off)
  • Automatic headers for CSS/JS files
    • this is configured in the gulpfile.js file

Framework