App Studio

Version 4.2
How To
Documentation
    Learn More

      Styles

      This article lists the valid values for the styling attribute supported by many App Studio markup tags.

      Global styles

      These styles can be applied to any element.

      Flex utilities

      • stretch-content: Uses flex box to stretch the child content

        See the grid and panel examples in the gallery.

      • stretch-row: Same as stretch-content but with auto height for use with rows

      • center-content: Center child content vertically and horizontally

        See the grid and panel examples in the gallery.

      • flex-nowrap: Prevent flex wrapping

      • flex-grow: Flex grow an element

      Width utilities

      • width-1: 100%

      • width-2-3: 66%

      • width-1-2: 50%

      • width-1-3: 33%

      • width-1-4: 25%

      Display utilities

      • inline-center

      • block

      • inline

      • inline-block

      • pull-left: float left

        See the button example in the gallery.

      • pull-right: float right

        See the button example in the gallery.

      • floated left: float element left

      • floated right: float element right

      • border: Add 1px border to element

      • border right: Add 1px right border to element

      • border left: Add 1px left border to element

      • border bottom: Add 1px bottom border to element

      • border top: Add 1px top border to element

      • centercontent: adds padding that pushes in from page edges.

      • centercontent-inner: adds borders and box-shadows etc. - should be used inside centercontent

      • centercontent-inner-shadow: Same as centercontent but with a drop shadow

      • fade: Fades out an element, add the class in to fade back in

      • bg-stretch: Stretch a background image to the full element height and width

      Headers

      • header header-fixed: position fixed header

      • header header-shadow: header with drop shadow

      • header header-gradient: header with gradient

      • header header-border

      Sizes

      • xs: Make the font-size the smallest - also works for making most elements smaller

      • sm

      • md

      • lg

      • xl

      • break-text-all: Make text wrap mid word

      • break-text-normal: Text wraps at best fit

      Border radius

      • border-radius: Adds rounded corners

      • border-radius-top-left: Adds rounder corner to top left

      • border-radius-top-right

      • border-radius-bottom-left

      • border-radius-bottom-right

      Typography

      • text-center

      • text-right

      • text-left

      • capitalize

      • uppercase

      • lowercase

      Colors

      See these colors in the gallery.

      • bg-lgrey: Light grey background

      • bg-mgrey

      • bg-dgrey

      • bg-charcoal

      • bg-black

      • bg-white

      • text-white: White text

      • bg-lbgrey

      • bg-mbgrey

      • bg-dbgrey

      • bg-blue

      • bg-sblue

      • bg-yellow

      • bg-orange

      • bg-red

      • bg-pink

      • bg-purple

      • bg-green

      • bg-primary

      • bg-primary-light

      • bg-primary-dark

      • bg-primary-contrast

      • text-primary

      • text-primary-contrast

      • bg-secondary

      • bg-secondary-light

      • bg-secondary-dark

      • bg-secondary-contrast

      • text-secondary

      • text-secondary-light

      • text-secondary-dark

      • text-secondary-contrast

      • bg-tertiary

      • bg-tertiary-light

      • bg-tertiary-dark

      • bg-tertiary-contrast

      • text-tertiary

      • text-tertiary-light

      • text-tertiary-dark

      • text-tertiary-contrast

      • bg-raspberry

      • bg-raspberry-light

      • bg-raspberry-dark

      • text-raspberry

      • text-raspberry-light

      • text-raspberry-dark

      • bg-strawberry

      • bg-strawberry-light

      • bg-strawberry-dark

      • text-strawberry

      • text-strawberry-light

      • text-strawberry-dark

      • bg-carrot

      • bg-carrot-light

      • bg-carrot-dark

      • text-carrot

      • text-carrot-light

      • text-carrot-dark

      • bg-pumpkin

      • bg-pumpkin-light

      • bg-pumpkin-dark

      • text-pumpkin

      • text-pumpkin-light

      • text-pumpkin-dark

      • bg-sunflower-light

      • bg-sunflower

      • bg-sunflower-dark

      • text-sunflower

      • text-sunflower-light

      • text-sunflower-dark

      • bg-leaf

      • bg-leaf-light

      • bg-leaf-dark

      • text-leaf

      • text-leaf-light

      • text-leaf-dark

      • bg-grass

      • bg-grass-light

      • bg-grass-dark

      • text-grass

      • text-grass-light

      • text-grass-dark

      • bg-emerald

      • bg-emerald-light

      • bg-emerald-dark

      • text-emerald

      • text-emerald-light

      • text-emerald-dark

      • bg-mint

      • bg-mint-light

      • bg-mint-dark

      • text-mint

      • text-mint-light

      • text-mint-dark

      • bg-aqua

      • bg-aqua-light

      • bg-aqua-dark

      • text-aqua

      • text-aqua-light

      • text-aqua-dark

      • bg-sky

      • bg-sky-light

      • bg-sky-dark

      • text-sky

      • text-sky-light

      • text-sky-dark

      • bg-royal

      • bg-royal-light

      • bg-royal-dark

      • text-royal

      • text-royal-light

      • text-royal-dark

      • bg-lavender

      • bg-lavender-light

      • bg-lavender-dark

      • text-lavender

      • text-lavender-light

      • text-lavender-dark

      • bg-pink

      • bg-pink-light

      • bg-pink-dark

      • text-pink

      • text-pink-light

      • text-pink-dark

      • bg-paper

      • bg-paper-light

      • bg-paper-dark

      • text-paper

      • text-paper-light

      • text-paper-dark

      • bg-concrete

      • bg-concrete-light

      • bg-concrete-dark

      • text-concrete

      • text-concrete-light

      • text-concrete-dark

      • bg-asphalt

      • bg-asphalt-light

      • bg-asphalt-dark

      • text-asphalt

      • text-asphalt-light

      • text-asphalt-dark

      • bg-duckegg

      • bg-duckegg-light

      • bg-duckegg-dark

      • text-duckegg

      • text-duckegg-light

      • text-duckegg-dark

      • bg-depth-dblue

      • text-depth-dblue

      • bg-depth-lblue

      • text-depth-lblue

      Switches

      Usage:

      <input type="checkbox" styling="checkbox-switch">
      <label>Switch Label</label>
      • checkbox-switch: Default switch

        Add styles to label:

        <input type="checkbox" styling="checkbox-switch">
        <label styling="square">Switch Label</label>
      • square

      • flat

      Switch colours

      Also added to the label * positive * negative * warning * info * secondary * tertiary

      Right-hand-side panel

      Adds a wikipedia-esque smart panel * rhspanel * rhspanel-shadow

      Tooltips

      • tooltip: Adds a tooltip using the aria-label attribute for the tooltip content

      • tooltip-top-left: Position tooltip

      • tooltip-top-right

      • tooltip-top

      • tooltip-bottom-left

      • tooltip-bottom-right

      • tooltip-bottom

      • tooltip-left

      • tooltip-right

      • tooltip-top

      • tooltip-small

      • tooltip-medium

      • tooltip-large

      • tooltip-error

      • tooltip-warning

      • tooltip-info

      • tooltip-success

      • tooltip-always: The tooltip is always shown

      • tooltip-rounded: Rounded corners

      • tooltip-no-animate

      • tooltip-bounce

      Hero banner

      This style is useful for landing pages.

      • hero-banner

      Label

      • label

      Buttons

      • button: Default button

      • button-hover: Hover state always active

      • button-secondary: Secondary colour

      • button-green

      • button-blue

      • button-white

      • button-disabled

      • button-hidden

      • block: Full width

      Forms

      • checkbox

      • radio

      • input-rounded: Applies only to inputs

      • group: Form input group

      • form-stacked: Stacked form - should be applied to the form

      • form-aligned

      • labelled-input: Labelled input e.g. an input with a dollar sign attached as a prefix

      • labelled-input label-right: Labelled input e.g. an input with a percentage sign attached as a suffix

      • styled-checkbox: CSS checkbox - should be applied to a checkbox input with a label as the next sibling

      Lists

      These styles can be applied to ordered (ol) or unordered (ul) HTML elements.

      • striped

      • lined

      Grid utilities

      • hide-xs: Hide on XS size screens

      • show-xs: Show on XS size screens

      • show-sm

      • show-md

      • show-lg

      • show-xl

      • show-xs

      • hide-xs

      • hide-sm

      • show-sm

      • hide-md

      • show-md

      • hide-lg

      • show-lg

      • hide-xl

      • show-xl

      Component styles

      These styles can be applied to specific tags.

      Field styles

      Styles for the search:field tag:

      • title

      • url

      • label-left

      • label-left-always

      • label-inline

      • label-above

      • description

      • image-top

      Image

      Styles for the media:image tag:

      • square-crop

      • circle-crop

      Facet

      This style can be applied to the search:facet tag:

      • switches: Render switches instead of checkboxes.

        Unlike the default checkboxes, only one switch can be selected at a time.

      Facet list

      Styles for search:facet-list tag:

      • shadow

      • shadow-far

      • recessed

      • step

      • simple

      • wrappedheader

      • hidemetadata

      • indented

      Search tabs and nav bars

      These styles are for the search:tabs tag.

      • navbar: Navbar style

      • navbar navbar-shadow

      • navbar navbar-centered

      • navbar navbar-tabs: Tab style of navbar

      • navbar navbar-light: Light version

      • tabs: Tabs style

      Comment list

      Styles for the collaborate:comment-list tag:

      • hide-avatars: Hides the comment avatars

      Pagination

      Styles for search:pagination tag.

      • pagination-wrapper-left: Align left

      • pagination-wrapper-center

      • pagination-wrapper-right

      Alert box

      Styles for search:alert tag.

      • alertbox: Style element as an alert box

      • alertbox-secondary: Secondary colour

      • alertbox-positive

      • alertbox-negative

      • alertbox-warning

      • alertbox-info

      Interruptors

      Apply to any element or use the block:interruptor tag.

      • interruptor: Style element as an attention grabber

        See the message example in the gallery.

      Scroll to

      Styles for the widget:scroll-to tag:

      • bottom-left: Position bottom left of the page

      • bottom-right

      • bottom-center

      Toggle panes

      Styles to be used like:

      <toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="pills" styling="pill"></toggle:controls>
      <toggle:panes id="pills">
        <toggle:pane>
        ...
      • tabs-shadow: Adds shadow to tabs

      • collapsible: Allows tabs to be collapsed by clicking the active tab

      • pill: Pill style

      • line

      • simple

      • bordered

      Cards

      • basic-card: Basic card style

      • card: Default card style

      Card results

      The card widths are auto-generated. By default a maximum of 6 result cards can be shown on one row. By setting @maxCardsPerRow this can be increased or decreased.

      On a search:result-list add the card styling in the following format:

      cards-{size}-{numberPerRow}

      For example:

      <search:result-list styling="cards-sm-2 cards-lg-4">

      This will show 2 cards per row on small screens, 4 on large screens.

      Card styles

      Styles for the search:result tag:

      • card-emphasis

      • card-shadow

      • card-step

      Popover

      Styles for widget:popover tag:

      • popover-wrapper: Popover style

      • popover-large: Large popover

      • popover-medium

      • popover-small