ForgeUI CSS components do not require JavaScript, and can be used freely once the ForgeUI CSS has been included on the page.

Most of the styling can be configured through CSS variables. Global CSS variables are listed below, while component-specific variables can be found alongside in the documentation for each component.

All CSS variables are flagged as !default in ForgeUI, so you can override them at any point.

Functions

rem-calc(sizeInPx)

Returns an equivalent size in rem.

p {
  font-size: rem-calc(16); // 1rem
}

h1 {
  font-size: rem-calc(24); // 1.5rem
}

Back to top

Mixins

clearfix()

Simple clearfix mixin.

.container {
  @include .clearfix();

  img {
    float: left;
  }
}

Back to top

Media Queries

@include small-only() {
  // mobile only styling
}

@include medium-up() {
  // tablet and larger styling
}

@include medium-only() {
  // tablet only styling
}

@include large-up() {
  // desktop and larger styling
}

<div class="alert-box secondary">
  <ul>
    <li class="show-small">This text shows on <em>small</em> screens</li>
    <li class="show-medium-up">This text shows on <em>medium or larger</em> screens</li>
    <li class="show-medium">This text shows on <em>medium</em> screens</li>
    <li class="show-large">This text shows on <em>large</em> screens</li>
    <li class="hide-small">This text hides on <em>small</em> screens</li>
    <li class="hide-medium">This text hides on <em>medium</em> screens</li>
    <li class="hide-large">This text hides on <em>large</em> screens</li>
  </ul>
</div>

Back to top

Helpers

ForgeUI sports the following helpers for quick and common CSS additions:

Back to top

Type

<h1>h1. Lorem Ipsum</h1>
<h2>h2. Lorem Ipsum</h2>
<h3>h3. Lorem Ipsum</h3>
<h4>h4. Lorem Ipsum</h4>
<h5>h5. Lorem Ipsum</h5>
<h6>h6. Lorem Ipsum</h6>
<p>p. Lorem Ipsum</p>
<p><small>small. Lorem Ipsum</small></p>
<p><a href="#">Link</a></p>

Back to top

Buttons

So. Many. Buttons.

Each button needs a button class. The following classes can be mixed and matched to change the type of button:

• secondary
• success
• warning
• alert
• hollow
• tiny
• small
• large
• expand
• inline-form

<div class="row">
  <div class="small-12 large-6 column">
    <div>
      <button type="button" class="button">Button</button>
      <button type="button" class="button secondary">Button</button>
      <button type="button" class="button success">Button</button>
      <button type="button" class="button warning">Button</button>
      <button type="button" class="button alert">Button</button>
    </div>
    <div>
      <button type="button" class="button tiny">Button</button>
      <button type="button" class="button small">Button</button>
      <button type="button" class="button">Button</button>
      <button type="button" class="button large">Button</button>
    </div>
    <div>
      <button type="button" class="button hollow">Button</button>
      <button type="button" class="button hollow secondary">Button</button>
      <button type="button" class="button hollow success">Button</button>
      <button type="button" class="button hollow warning">Button</button>
      <button type="button" class="button hollow alert">Button</button>
    </div>
  </div>
  <div class="small-12 large-6 column">
    <div>
      <button type="button" class="button expand">Button</button>
    </div>
    <div>
      <button type="button" class="button expand hollow">Button</button>
    </div>
    <div>
      <button type="button" class="button expand tiny">Button</button>
      <button type="button" class="button expand small">Button</button>
      <button type="button" class="button expand">Button</button>
      <button type="button" class="button expand large">Button</button>
    </div>
  </div>
</div>

Back to top

Pill

Pills are a simple way to highlight a portion of text. They are inline elements and can be modified by any of the color classes

• default
• primary
• secondary
• success
• warning
• alert

<ul class="inline">
  <li><span class="pill">default</span></li>
  <li><span class="pill primary">primary</span></li>
  <li><span class="pill secondary">secondary</span></li>
  <li><span class="pill success">success</span></li>
  <li><span class="pill warning">warning</span></li>
  <li><span class="pill alert">alert</span></li>
</ul>

Back to top

Grid

Grid columns should be nested under a row element. Columns can be separated using a 12-column system with small, medium, and large prefixes for responsive changes in column flow. All columns should include the column class.

<div class="row">
  <div class="small-12 column">12</div>
</div>
<div class="row">
  <div class="small-1 column">1</div>
  <div class="small-2 column">2</div>
  <div class="small-3 column">3</div>
  <div class="small-6 column">6</div>
</div>
<div class="row">
  <div class="small-4 column">4</div>
  <div class="small-8 column">8</div>
</div>

Back to top

Block Grid

The block grid uses a row parent just like the normal grid, but instead of setting the column size on the column, it is set with a small-up-X, medium-up-X, or large-up-X class, where X represents the number of columns before each line break, and is a number 1 through $block-grid-column-count (8 by default).

<div class="row small-up-8">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
  <div class="column">6</div>
  <div class="column">7</div>
  <div class="column">8</div>
  <div class="column">9</div>
  <div class="column">10</div>
  <div class="column">11</div>
  <div class="column">12</div>
  <div class="column">13</div>
  <div class="column">14</div>
  <div class="column">15</div>
  <div class="column">16</div>
  <div class="column">17</div>
  <div class="column">18</div>
  <div class="column">19</div>
  <div class="column">20</div>
</div>

Back to top

Transitions

To use any of the transitions, simple add the keyword to the transition name to the element you will be showing/hiding as described in the Vue documentation.

The following transitions are available as part of ForgeUI:

• fade
• expand
• slide-fade
• zoom-in
• zoom-out

Back to top

Inline Lists

• One Item
• Two Item
• Red Item
• Blue Item

<ul class="inline">
  <li>One Item</li>
  <li>Two Item</li>
  <li>Red Item</li>
  <li>Blue Item</li>
</ul>

Back to top

Icon

The icon component is meant for simple rendering of SVG icons and has built with custom icons in mind.

The icon component uses the xlink:href attribute to point at a symbol in an SVG store elsewhere on the page. For instructions on setting up an SVG store, see this blog post.

ForgeUI also comes with a basic set of icons you can use in lieu of a custom set of SVGs. To use the ForgeUI icons, modify the source your task runner looks for SVG files in, passing along the ForgeUI include paths to gulp.src.

/* gulpfile.js */
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var inject = require('gulp-inject');

gulp.task('default', function () {
  // use 'forge-ui/includePaths' to create a glob that includes the ForgeUI icons
  var svgs = gulp.src(require('forge-ui/includePaths').icons).pipe(svgstore({ inlineSvg: true }));

  function fileToString(filePath, file) {
    return file.contents.toString();
  }

  return gulp.src('./index.html')
    .pipe(inject(svgs, { transform: fileToString }))
    .pipe(gulp.dest('./'));
});

<icon name="home" :size="40"></icon>
<icon name="home"></icon>
<icon name="home" :size="10"></icon>

new Vue({
  el: '#icon_demo'
});

ForgeUI Icons

More icons coming soon !!!

Back to top

Alert

The alert component is designed to have it's methods accessed via ref in a parent component. Calling the appropriate method attached to the ref will render an error in the box. Setting the error as a new type will clear the previous errors in the alert.

<alert ref="myAlert" :can-close="true"></alert>
<div class="row">
  <div class="small-12 medium-5 column">
    <f-input type="text" label="Alert Message" v-model="alertMessage"></f-input>
  </div>
  <div class="small-12 medium-5 column">
    <f-select label="Method" v-model="selectedMessageType" :options="messageTypes" :required="true"></f-select>
  </div>
  <div class="small-12 medium-2 column">
    <button type="button" class="button expanded inline-form" @click="newMessage()">Send</button>
  </div>
</div>

new Vue({
  el: '#alert_demo',
  data: {
    alertMessage: '',
    selectedMessageType: 'message',
    messageTypes: [
      { value: 'message', label: 'vm.$refs.myAlert.message()' },
      { value: 'primary', label: 'vm.$refs.myAlert.primary()' },
      { value: 'secondary', label: 'vm.$refs.myAlert.secondary()' },
      { value: 'success', label: 'vm.$refs.myAlert.success()' },
      { value: 'warning', label: 'vm.$refs.myAlert.warning()' },
      { value: 'alert', label: 'vm.$refs.myAlert.alert()' },
    ]
  },
  methods: {
    newMessage() {
      this.$refs.myAlert[this.selectedMessageType](this.alertMessage);
    }
  }
});

Back to top

Tabs

The Tabs component acts as a wrapper for any number of Tab components. Minimal configuration is needed to render a set of tabs, so long as the component is registered to vue.

<tabs>
  <tab heading="Foo" :selected="true">
    <p>Some tab content</p>
  </tab>
  <tab heading="Bar">
    <p>Some content for another tab</p>
  </tab>
  <tab heading="Baz">
    <p>Even more tab content!</p>
  </tab>
</tabs>

new Vue({
  el: '#tabs_demo'
});

Back to top

Modal

A simple modal dialog.

<button type="button" class="button" @click="openModal()">Open Modal</button>

<modal ref="myModal">
  <div slot="header">
    <h3>Look, a Modal!</h3>
  </div>
  <div slot="content">
    <p>some super awesome modal content</p>
    <button type="button" class="button" @click="closeModal()">Close</button>
  </div>
</modal>

new Vue({
  el: '#modal_demo',
  methods: {
    openModal() {
      this.$refs.myModal.open();
    },
    closeModal() {
      this.$refs.myModal.close();
    }
  }
});

Back to top

Prompt

A simple prompt component meant to replace the native prompt and confirm methods. This will allow you to style the dialog to match your site and prevent users from asking the browser to suppress further dialogs.

This component is meant to get input back from the user. If you simply need to notify the user of something, use an alert component to display the information and it's canClose property if the information should be dismissable.

With great power comes great responsibility. These dialogs cannot be suppressed by the browser, so take care not to inundate the user with an endless stream of repeditive dialogs.

Both prompt methods take an options object supporting the following parameters:

• question the dialog label to present to the user
• yesLabel the confirm button label
• noLabel the cancel button label
• yes a function to execute when the user clicks the confirm button
• no a function to execute when the user clicks the cancel button

<prompt ref="myPrompt"></prompt>
<button type="button" class="button" v-on:click="prompt('ask')">vm.$refs.myPrompt.ask()</button>
<button type="button" class="button" v-on:click="prompt('confirm')">vm.$refs.myPrompt.confirm()</button>

new Vue({
  el: '#prompt_demo',
  methods: {
    prompt(method) {
      this.$refs.myPrompt[method]({
        question: 'Judge me by my size, do you?',
        yes: function (answer) {
          // if method is 'ask',
          // the dialog input value will be passed as the first argument
        },
        no: function () {
          // the prompt will close itself,
          // but you can use this option to trigger side effects
        }
      });
    }
  }
});

Back to top

Snackbar

The snackbar component offers up an alternative alert style that shows a fixed position message for a short dureation before closing itself.

<snackbar ref="mySnackbar" :position="currentPosition"></snackbar>
<f-form :ajax="true" @submit="newToast">
  <div class="row">
    <div class="small-12 column">
      <f-radio label="Position" v-model="currentPosition" :options="options" name="positioningOptions"><f-radio>
    </div>
    <div class="small-12 medium-5 column">
      <f-input type="text" label="Message" v-model="toast" :required="true"></f-input>
    </div>
    <div class="small-12 medium-2 column">
      <button type="submit" class="button expanded inline-form">Toast!</button>
    </div>
  </div>
</f-form>

new Vue({
  el: '#snackbar_demo',
  data: {
    toast: '',
    currentPosition: 'bottom left',
    options: [
      { name: 'topOption', label: 'top', value: 'top' },
      { name: 'bottomOption', label: 'bottom', value: 'bottom' },
      { name: 'leftOption', label: 'left', value: 'left' },
      { name: 'rightOption', label: 'right', value: 'right' },
      { name: 'topLeftOption', label: 'top left', value: 'top left' },
      { name: 'topRightOption', label: 'top right', value: 'top right' },
      { name: 'bottomLeftOption', label: 'bottom left', value: 'bottom left' },
      { name: 'bottomRightOption', label: 'bottom right', value: 'bottom right' }
    ]
  },
  methods: {
    newToast() {
      if (this.toast !== '') {
        this.$refs.mySnackbar.toast(this.toast, () => alert('bar'));
      }
    }
  }
  });

Back to top

fForm

The fForm component automatically validates it's child components on form submission and can be configured use default submission behavior or execute a callback function is inline or AJAX behavior is more desirable.

If there are any errors in the configured validation errors will be triggered on inputs and the form will not submit or execute the submitCallback.

<alert ref="myAlert" :can-close="true"></alert>
<f-form :ajax="true" @submit="showMessage">
  <f-input type="text" v-model="message" :required="true"></f-input>
  <button type="submit" class="button">Submit</button>
</f-form>

new Vue({
  el: '#form_demo',
  data: {
    message: ''
  },
  methods: {
    showMessage() {
      this.$refs.myAlert.success(this.message);
    }
  }
});

Back to top

fInput

The fInput component provides a quick and easy way to add a standardized form input with automatic validation. The fInput directive can generate a textarea or any html5 input type. Validation occurs automatically on blur.

<f-input type="email" label="Email" v-model="email" />

new Vue({
  el: '#input_demo',
  data: {
    email: ''
  }
});

Back to top

fCheckbox

Renders a checkbox input

<f-checkbox v-model="checked" label="My checkbox"></f-checkbox>

new Vue({
  el: '#checkbox_demo',
  data: {
    checked: false
  }
});

Back to top

fRadio

Renders a radio button input

<f-radio label="My Radio Group" v-model="selectedOption" :options="radioOptions" name="myRadioOptions"><f-radio>

new Vue({
  el: '#radio_demo',
  data: {
    selectedOption: '',
    radioOptions: [
      { name: 'radioOptionOne', label: 'One Option', value: '1' },
      { name: 'radioOptionTwo', label: 'Two Option', value: '2' }
    ]
  }
});

Back to top

fSelect

Renders a select input given a set of options

<f-select v-model="selectedOption" :options="selectOptions"></f-select>

new Vue({
  el: '#select_demo',
  data: {
    selectedOption: '',
    selectOptions: [
      { label: 'One Option', value: '1' },
      { label: 'Two Option', value: '2' },
      { label: 'Red Option', value: 'Red' },
      { label: 'Blue Option', value: 'Blue' }
    ]
  }
});

Back to top

Required Field Validation

You can easy check for required values by attaching the :required="true" to most Forge input components.

Attaching the required attribute to a select element will prevent that element from rendering an empty option as a child of the select.

<f-form :ajax="true" @submit="submit">
  <f-input type="text" v-model="input" label="My Input" :required="true"></f-input>
  <f-select v-model="selectedOption" :options="selectOptions" :required="true"></f-select>
  <f-checkbox v-model="checked" label="My checkbox" :required="true"></f-checkbox>
  <f-radio v-model="selectedOption" :options="radioOptions" label="My Radio Group" name="myRadioOptions" :required="true"></f-radio>
  <button type="submit" class="button">Submit</button>
</f-form>

new Vue({
  el: '#required-validation',
  data: {
    input: '',
    selectedOption: '',
    selectOptions: [
      { label: 'One Option', value: '1' },
      { label: 'Two Option', value: '2' },
      { label: 'Red Option', value: 'Red' },
      { label: 'Blue Option', value: 'Blue' }
    ],
    checked: false,
    selectedOption: '',
    radioOptions: [
      { name: 'radioOptionOne', label: 'One Option', value: '1' },
      { name: 'radioOptionTwo', label: 'Two Option', value: '2' },
    ]
  },
  methods: {
    submit() {
      alert('Form is valid!');
    }
  }
});

Back to top

Field Type Validation

Validating a form field against a particular type is as simple as passing a type attribute to the component. To skip field type validation, set your input type to text.

This is the current list of input types that are automatically validated:

• email
• url
• number
• tel

<f-form :ajax="true" @submit="submit">
  <f-input type="email" v-model="emailInput" label="Email"></f-input>
  <f-input type="url" v-model="urlInput" label="URL"></f-input>
  <f-input type="number" v-model="numberInput" label="Number"></f-input>
  <f-input type="tel" v-model="telInput" label="Tel"></f-input>
  <button type="submit" class="button">Submit</button>
</f-form>

new Vue({
  el: '#type-validation',
  data: {
    emailInput: '',
    urlInput: '',
    numberInput: '',
    telInput: ''
  },
  methods: {
    submit() {
      alert('Form is valid!');
    }
  }
});

Back to top

Match Validation

To match an input's value against the value of another input, pass the match value into the input via the equal-to attribute.

<f-form :ajax="true" @submit="submit">
  <f-input type="text" v-model="passwordInput" label="Password"></f-input>
  <f-input type="text" v-model="confirmInput" label="Confirm Password" :equal-to="{ label: 'Password', value: passwordInput }"></f-input>
  <button type="submit" class="button">Submit</button>
</f-form>

new Vue({
  el: '#match-validation',
  data: {
    passwordInput: '',
    confirmInput: ''
  },
  methods: {
    submit() {
      alert('Form is valid!');
    }
  }
});

Back to top

ForgeUI is built to customize. The following options giv eyou the ability to modify component templates and/or rename components for maximum flexibility. This allows you to keep the components from this library in sync with your apps style guide without clobbering styles or duplicating code.

Forge.cast()

Forge.cast(component, template, componentName)

The Forge.cast() method is your primary way of customizing components before registering them to Vue. Use this method to change component templates or to rename components without creating a new component file.

You can customize and rename as many components as you like, up until the point where Vue.use(Forge) is invoked, at which point all unregistered components will be added to Vue.

Forge will register all components that have not been registered to the default component names. For example, is you rename the modal component, and then add Forge to Vue, Forge will still initialize the default modal component to the <modal></modal> component. However, if you change the template of the modal component, Forge will not re-register the same element. This ensures that all the components used by Forge are available, without clobbering any component customizations that have already been registered to Forge.

import Vue from 'vue';
import Forge from 'forge-ui';

// Register a component with a custom template (optional)
import myTemplate from './template.html';
Forge.cast('modal', myTemplate);

// Register a component with a custom name (optional)
Forge.cast('modal', null, 'my-modal'); // you can now use the modal component with <my-modal></my-modal>

// Register all Forge components to Vue
Vue.use(Forge);

Back to top

Customizing SCSS

Forge comes with a compiled and minified CSS file in the dist folder for prototyping and quick starts. To import the SCSS files as part of your build process, forge comes packages with an extra utility file in the root of the module that will allow you to easily add the appropriate include paths to your Gulp build.

/* gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function () {
  return gulp.src('path/to/styles.scss')
    .pipe(sass({includePaths: require('forge-ui/includePaths').styles})
    .pipe(gulp.dest('dist/css'));
});

For more customization of the styling, each Vue and CSS component comes with a host of SCSS variables that can be configured to taste for each app.

Each variable is declared as a default, so overriding these values is easy. First, though, you'll need to set up your main SCSS file with a settings import and Forge import.

/* /scss/style.css */

@import "_settings";
@import "forge-ui";

/* ... */

At this point, customization is as easy as finding the component in the documentation you wish to modify, and copying the variable name into _settings.scss.

For example, if we want to change the body background color to an off-white color we could add the following to _settings.scss:

/* /scss/_settings.scss */

$body-background: #fefefe;

/* ... */

Back to top