Skip to main content

JumpStarter is an advanced starting point for GovCMS8 sites.

JumpStarter Extensions for GovCMS

JumpStarter extends GovCMS in a number of ways. This page is a test page which demonstrates the working.

Components

The following components can be used to display or layout your data.

Content breakout

If you need to fit more content on the screen.

Event image

-
Canberra, Australian capital territory

Section

One section can provide a common background for multiple components.

JumpStarter is a Drupal 8 distribution, based on top of GovCMS8. It contains all of the standard features of GovCMS8 with the addition of a number of extensions aimed at making GovCMS even better. Hit the ground running with a site which can run on GovCMS SaaS, supports the Design Guide and gives editors a great set of tools to build sites.

123.00

Each component can still maintain they own background.

JumpStarter is a Drupal 8 distribution, based on top of GovCMS8. It contains all of the standard features of GovCMS8 with the addition of a number of extensions aimed at making GovCMS even better. Hit the ground running with a site which can run on GovCMS SaaS, supports the Design Guide and gives editors a great set of tools to build sites.

Charts

For displaying your data there is a versatile chart component with multiple types. It allows you to customize colors and axis labels as needed.

Sample line chart
CSV
"City","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
"Tokyo",7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6
"New York",-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5
"Berlin",-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0
"London",3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8
Sample bar chart
CSV
"Period","Africa","America","Asia","Europe","Oceania"
"Year 1800",107, 31, 635, 203, 2
"Year 1900",133, 156, 947, 408, 6
"Year 2012",1052, 954, 4250, 740, 38
Sample area chart
CSV
"Country",1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006
"USA",null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
"USSR/Russia",null, null, null, null, null, null, null, null, null, null,5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,21000, 20000, 19000, 18000, 18000, 17000, 16000
Sample pie chart
CSV
Brand,Share
"Microsoft Internet Explorer",56.33
"Chrome",24.03,
"Firefox",10.38
"Safari",4.77
"Opera",0.91
"Proprietary or Undetectable", 0.2

Circle progress

Best component for displaying a single numerical value. Settings for this component allows to change colors, value, arc size, value prefix and suffix.

Transparent
95.00

Circle 1 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.

Transparent
0.75

Circle 2 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.

Transparent
35.00

Circle 3 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.

Modifiers

The following modifiers can be used to alter the appearance of components

Scroll Reveal

The Scroll Reveal modifier eases content in slowly when the user has scrolled to the spot in the page.

Scroll Reveal: Sequence

The Scroll Reveal modifier eases sequences of items when the user has scrolled to the spot in the page. This works well with Node Lists and Item Lists.

Event image

-
Canberra, Australian capital territory
Event image

-
Canberra, Australian capital territory

Font modifier

Need a custom font for an extra announcement?

Custom radial gradient

Catch readers attention by a radial gradiet with unlimited colors, shape options and center position.

Adaptive height modifier

Set height relatively to screen width – great for maintaining custom aspect ratio. Content vertical position can be set.

Clip Path modifier

The Clip Path modifier allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset).

View component

Powerfull views listing can be added to any page as a component with modifiers.

-
Canberra, Australian capital territory

Use Event to reach your target audience.

Event image

-
Canberra, Australian capital territory

Use Event to reach your target audience. (Current event)

Event current image

-
Canberra, Australian capital territory

Use Event to reach your target audience. (Future event)

Event future image

-
Canberra, Australian capital territory

Use Event to reach your target audience. (Past event)

Event past image

Video background

View mode – Teaser Big

Node List of example content, rendered with Teaser Big view mode in a single column.

Blog article – example

Use Blog articles to reach your target audience directly.

Blog image

View Mode - Tile

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Standard page image

Use Event to reach your target audience.

Event image

Use Blog articles to reach your target audience directly.

Blog image

This as an example Freedom of Information Request

FOI image

View Mode - Icon

govCMS logo

Basic icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

govCMS logo

Icon with background colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

govCMS logo

Icon with background image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales sed arcu non auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Layout: Alternating

Node List of example content, rendered with Teaser view mode in a single alternating column.

Standard page - example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Standard page image

Blog article – example

Use Blog articles to reach your target audience directly.

Blog image

Event Current - example

-

Use Event to reach your target audience. (Current event)

Event current image

Social share icons - icon only

Social share icons - label only

Social share icons - pills - small

Social share icons - half pills

GeoJSON and Leaflet

The Map component allows multiple GeoJSON files to be rendered, sources from JSON data as text or from a URL.

App component

 
 
Was this page helpful?