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. - Edit the file to change from
Customization
-
Decide whether you want to use PatternFly 4 as your base, or a fully customized UI.
-
For a PatternFly 4 base, see Features for building.
-
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 tobase.scss
) to build out your UI.
- To start,
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
- this is configured in the