Back to Top
Contents

Royal Society pattern library More about us

Glossary


Term Description
RS Royal Society
CSS Cascading style sheet
JS JavaScript
API Application programming interface
IE Internet explorer

Notes


Although we have endeavoured to specify exactly what Cascading style sheet (CSS) and JavaScript (JS) is required for each component we still recommend that you include all provided CSS and JS to ensure correct functionality, styling and browser support.

Common

Grid and layout


The Royal Society (RS) website is based upon a 12 column horizontal grid, with a maximum content area of 1225px. Column widths are set to 75px and gutters are fixed at 25px. The components in the RS website are sized to fit within this grid. Please make sure that when creating new components, you adhere to the same grid.

All components should also, where possible, conform to the grid as described on this page. All components should have a minimum vertical clearance of 22px from the components below or above, and a minimum horizontal clearance of 25px from the components to the left or to the right. Following these clearance and alignment rules will help to maintain readability and aesthetic appeal.

Most layouts within the RS website use a section element with a class of contentBox to create panels of content. A layout can be built using any number of these sections. Components and content can then be added to populate each section. Please see the example mark up for creating a section below.

Helpful modular classes

There are a selection of helpful CSS classes that can help with layout. Please see below.

Class Description
.left Float an element to the left. Adds a CSS rule of "float: left;".
.right Float an element to the right. Adds a CSS rule of "float: right;".
.clear Clears an element. Adds a CSS rule of "clear: both;".
.fullClear Clears an element and adds a width of 100%. Adds a CSS rules of "float: left; clear: both; width: 100%;".
.cf Forces an element to self-clear its children. Adds psudeo elements for :before and :after with CSS rule of "content: " "; display: table;" and "clear: both;" for the :after element.
.fullWidth Makes an element full width. Adds a CSS rule of "width: 100%;".
.halfWidth Makes an element span half the width of its parent element. Adds a CSS rule of "width: 50%;".
.oneFifthWidth Makes an element span 1/5th the width of its parent element. Adds a CSS rule of "width: 20%;".
.fourFifthWidth Makes an element span 4/5th the width of its parent element. Adds a CSS rule of "width: 80%;".
.twoThirdWidth Makes an element span 2/3rd the width of its parent element. Adds a CSS rule of "width: 65.9574468085%;".
.oneThirdWidth Makes an element span 1/3rd the width of its parent element. Adds a CSS rule of "width: 34.0425531915%;".
.oneQuarterWidth Makes an element span 1/4th the width of its parent element. Adds a CSS rule of "width: 25.5319148936%;".
.threeQuarterWidth Makes an element span 3/4th the width of its parent element. Adds a CSS rule of "width: 74.4680851064%;".
.leftGutter Adds 25px worth of gutter to the left side of an element. Adds a CSS rule of "padding-left: 25px;".
.rightGutter Adds 25px worth of gutter to the right side of an element. Adds a CSS rule of "padding-right: 25px;".
.topGap Adds 22px worth of space to the top of an element. Adds a CSS rule of "margin-top: 22px;".
.bottomGap Adds 22px worth of space to the bottom of an element. Adds a CSS rule of "margin-bottom: 22px;".
.halfTopGap Adds 11px worth of space to the top of an element. Adds a CSS rule of "margin-top: 11px;".
.halfBottomGap Adds 11px worth of space to the bottom of an element. Adds a CSS rule of "margin-bottom: 11px;".
.doubleBottomGap Adds 44px worth of space to the bottom of an element. Adds a CSS rule of "margin-bottom: 44px;".
.doubleTopGap Adds 44px worth of space to the top of an element. Adds a CSS rule of "margin-top: 44px;".

Colour


Please see below the core colours used within the RS website.

  • Red
    background-color: #ba0c2f

    Usage

    Used throughout the site to indicate important areas of interest and interactive elements such as navigation, active/hover states, links and calls to action.

  • Stone
    background-color: #d6d2c4

    Usage

    Interactive elements such as filter groups and inactive tabs. Also used for descriptive information on journal cards.

  • Stone (light shade)
    background-color: #e8e6df

    Usage

    Page background.

  • Charcoal
    background-color: #333132

    Usage

    Headings, body text and the background colour for selected additional information areas such as grant opening dates and event series. Also used as the background for mobile-specific user interface elements such as "related events" and "event organisers".

  • Plum
    background-color: #6f263d

    Usage

    Alternate call to action background colour, often used where red would be too strong or a lower level of prominence is required. Example uses include Rolodex, table headers and event card date fields.

  • Warm grey
    background-color: #aca2a0

    Usage

    Used primarily for the heading area of grant cards. Also used for icons such as blog date and the footer "back to top" icon.

  • Warm grey (light shade)
    background-color: #e0dcdb

    Usage

    Event schedule headers, content page features (such as grant application information on grant content detail pages) and table cells.


Journal card colours

  • Green
    background-color: #55ba46

    Usage

    Used for journals covering biological sciences.

  • Blue
    background-color: #0093d0

    Usage

    Used for journals covering physical sciences.

  • Purple
    background-color: #e8e6df

    Usage

    Used for cross-disciplinary journals.

  • Warm grey
    background-color: #938884

    Usage

    Used for journals covering the history of science.

  • Charcoal
    background-color: #333132

    Usage

    Used for journals covering all sciences.

Typography


Please see below the core typography.

Fellowship Directory (h1)

Fellows in the news (h2)

Journals (h3)

Collections (h4)

Fellowship Directory (h1, subheading)

Fellows in the news (h2, subheading)

Journals (h3, subheading)

Collections (h4, subheading)

Fellowship Directory (h1, link)

Fellows in the news (h2, link)

Journals (h3, link)

Collections (h4, link)

The Royal Society is a self-governing Fellowship made up of the most eminent scientists, engineers and technologists from the UK and the Commonwealth. Fellows and Foreign Members are elected for life through a peer review process on the basis of excellence in science. (p)

There are approximately 1,600 Fellows and Foreign Members, including around 80 Nobel Laureates. Each year up to 52 Fellows and up to 10 Foreign Members are elected from a group of around 700 candidates who are proposed by the existing Fellowship. (p, strong)

Tim Bliss is a neuroscientist whose work has done much to provide a neural explanation for learning and memory. (p, em)

With Professors Richard Morris and Graham Collingridge he won the prestigious Brain Prize for their "outstanding contribution to European neuroscience" (p, a).

Unordered list

  • A list item (li)
  • A list item (li)
  • A list item (li)

Ordered list

  1. A list item (li)
  2. A list item (li)
  3. A list item (li)

I want to let you know what a pleasure it was to publish my manuscript in Open Biology. These days it is hard to find a journal that is open to publishing ideas and is both fast and fair, but Open Biology offers exactly that! The sooner work is published the better so I will certainly consider Open Biology again for future articles. Thank you for being on my (and science’s) side!

Dr James D. Watson ForMemRS, Cold Spring Harbor Laboratory, USA

Example markup

Icons


The following icons are available to use within the RS build. These icons are available as an icon font using either the pseudo :after or :before element to render them on the page.

Examples

Please see coded examples below. Each icon class uses either a :before or :after pseudo element to add the icon. As you can see each icon has been coloured and sized to be fit for its particular purpose. Therefore, if you wish use the icons at a different size or colours you will need to write new CSS classes.

Example markup

Codes

The following codes can be put into content attribute of the pseudo element to produce the desired icon.

Icon Code
Menu \e600
Search \e601
Key \e602
Flip \e603
Navigate up \e604
Navigate down \e605
Arrow up \e608
Arrow down \e609
Navigation left \e606
Navigation right \e607
Arrow left \e60a
Arrow right \e60b
Filter \e60c
Quote left \e60d
Quote right \e60e
Phone \e60f
Email \e610
Play \e612
Tick \e616
External \e615
RSS \e614
Plus \e617
Pdf \e618
Xls \e619
Word \e61a
Facebook \e61b
Twitter \e61c
Youtube \e611
GooglePlus \e61d
LinkedIn \e61f
Pinterest \e620
Instagram \e61e

Imagery


Please see below a list of all images used for the components listed in this pattern library. The list also includes other information (ratio cropped and recommended upload size) which are only required if you decide to use an image hander in your solution combined with imageSizes.js plugin.

Please note: For example implementation of the image handler and imageSizes.js solution please see the Redweb (RW) build.

Image information

Location/Name Displayed size Ratio cropped
Features
Grants & Awards Feature - Large image 375px x 300px Three quarter ratio
Grants & Awards Feature - Small image 175px x 140px Three quarter ratio
Journals large feature image 775px x 374px Half ratio
Venue hire feature small image 294px x 141px Half ratio
Venue hire feature large image 688px x 284px Half ratio
Event feature - large image 375px x 300px Three quarter ratio
Event feature - small image 175px x 140px Three quarter ratio
Cards
Fellow card image 175px x 175px No ratio
Event card image 275px x 220px Four fifth ratio
Grant/Award card image 275px x 220px Four fifth ratio
Blog post card image 275px x 176px Two third ratio
Video podcast card image 275px x 176px Two third ratio
People card image 300px x 229px Three quarter ratio
Journal card image 275px x 220px Four fifth ratio
Committee card image 175px x 140px Four fifth ratio
Medallist card image 175px x 175px No ratio
Other
Search result listing image 176px x 113px Two third ratio
Rolodex image 1175px x 396px No ratio
Event organisers image 175px x 175px No ratio
Homepage feature image 600px x 308px No ratio
About us spotlight image 600px x 290px Half ratio
Topic grid image 275px x 176px Two third ratio
Gallery bar image 275px x 275px No ratio

Tables


Please see an example table below. Tables in the RS build adapt responsively in the manner described in Google fundamentals library.

Example

Cookie name Purpose Type Details
acceptsCookies/Access, cks Site cookie acceptance. These cookies are used to record if the end user's browser accepts the use of cookies session Strictly necessary for login and pay-per-view activities. Usually this will not be used unless the end user requests a service that makes use of cookies. Info held: text string 'true'.
foxycart, cme, personify For ecommerce solutions Site cookie, defined time interval These cookies are required for control flow between Drupal and the e-commerce providers to reload cart, to make login attempts, to keep transaction session.
highwire_alerts_user_email For storing user email for alerts, if user is not logged in and wants to subscribe to alerts Site cookie, defined time interval Will hold email address only.

Example markup

High

Filters


Description

Filters are used throughout the RS website in sections including the fellow search, awards search and grants search. In the RW build the majority of Filters are populated through a GET/POST request to a backend ASP.NET WEB Application Programming Interface (API) JSON service.

Required CSS

css/main.css - incudes the main CSS styles for the Filters.

css/modular.css - includes any modular, reusable CSS rules like .fullWidth, .left and .fullClear which are used for the Filters.

css/print.css - includes any print specific CSS styles that are used for the Filters.

css/responsive.css - includes responsive CSS styles for the Filters.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for Filters including a IE10 styled select fix and also functionality needed for the filter reveal on filter button click.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Data dependencies

No dependencies. Filter population will be down to RS implementation and solution.

Filter types

See below the four core filter types with working examples and mark up examples.

Please note: The data attribute called data-revealedcontentid is used to reference the ID of the element that should open when the button is clicked.


Select dropdown

Example select dropdown filter using award data.

Example markup


Text search

Example text search filter.

Example markup


Text search with autocomplete

Example text search with autocomplete. Please note this filter will rely on a backend service to supply autocomplete data therefore we have mocked up how this would appear. There can also be an optional button shown in the open state, example below.

Closed State

Example markup

Open state

Example markup


Checkbox

Please see an example checkbox filter below. The default state is unchecked.

Example markup


Significant responsive state changes

The significant change for the Filters happens at 730px. The filters then stay the same apart from minor changes all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Filter Reveal Buttons

Below 730px Above 730px

Select Dropdown

Below 730px Above 730px

Text Search

Below 730px Above 730px

Text Search with Autocomplete

Below 730px Above 730px

Checkbox

Below 730px Above 730px

Example

Please see functional examples below on the live RS website.

View example

Search result listing


Description

The Search result listing in the RW build has a high level of dependency on AngularJS. In the example below all AngularJS markup has been stripped out to show the bare HTML and CSS needed to style the Search result listing. Functionality will be down to RS implementation and solution. The Search result listing comprises of a search box to either amend or begin a search, a grouped button element which updates the category of listings being displayed, a selection of filters, sort options and a clear filters button.

Example

Show results in:

Show filters Clear filters
Sort by:
  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …

  • Open science and data

    05 February 2015 - Open data is data that is freely available to anyone to access, use and share. Open data affects the way research is conducted and communicated, with …


9469 results

Show more results

Show 10 | 20 | 50 | 100

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Search result listing.

css/responsive.css - includes the responsive CSS styles for the Search result listing.

css/modular.css - includes any reusable CSS rules like .noMargin, .right and .cf that are used for the search result listing.

css/print.css - includes any print specific CSS styles that are used for the search result listing.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for filters including a IE10 styled select fix and also functionality needed for the filter reveal on filter button click.

js/main.js - includes the JS for functionality/mobile changes.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Search result listing happen at 950px and 730px. The Search result listing then stays the same apart from minor changes all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 730px

Implementation/Data dependencies

In the RW build the Search result listing depends heavily on AngularJS for functionality. It pulls data from internal APIs and Google Custom Search API. RW have provided all necessary HTML and CSS and functionality and data population will be down to RS implementation and solution.

Example

View example

Alerts


Description

Alerts are shown in the eFellows section of the site. They include a title, link and expiry date. They also have a cross which can be used to dismiss the alert once it has been read by the user.

Example

Alerts

A line of text putting these important updates into context.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Alerts.

css/responsive.css - includes the responsive CSS styles for the Alerts.

css/modular.css - includes any reusable CSS rules like .noMargin, .right and .cf that are used for the Alerts.

css/print.css - includes any print specific CSS styles that are used for the Alerts.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains additional site JS. In particular for this component it contains the JS used to call the API and set the Alert to viewed.

js/main.js - includes the JS for functionality/mobile changes.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Alerts happen at 760px and 520px when the maximum number of Alerts per row changes to make the most of the available space. The Alerts then stays the same apart from minor changes all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 760px Below 760px Below 520px

Implementation/Data dependencies

In the RW build this components data is populated through a repeater within its .ascx file with the data coming from Sitecore. On click of the cross the Alert is updated through an API call to say it has been viewed and is no longer shown.

Example

An example of this component can be viewed within the eFellows section on the live site. To access the eFellows section a login will be required.

Fellow login


Description

The Fellow login is part of the Main Header of the site. It's part of the header draw which includes the markup and functionality for Fellow login and Search. Below 950px Fellow login in the Main Header is hidden and is instead found within the Mobile Navigation.

Example

Please see header above.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Fellow login.

css/responsive.css - includes the responsive CSS styles for the Fellow login.

css/modular.css - includes any reusable CSS rules like .left, .right and .clear which are used for the Fellow login.

css/print.css - includes any print specific CSS styles that are used for the Fellow login.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/page.js - includes the JS for functionality/mobile changes.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant change for the Fellow login happens at 950px when the positon of the Fellow login and method of accessing it changes to the Mobile Navigation. Please see screenshots of before and after below.

Above 950px (Desktop) Below 950px (Mobile)

Implementation

Please see notes for Main navigation.

Data dependencies

Name Description
Login Sitecore login functionality

Example

View example

Medium


Side navigation


Description

The Side navigation is used to display pages that are siblings of your current page as well as a link back to its parent page. Below 950px the Side navigation collapses and becomes expandable.

Example

Section title

Main content area

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.

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.

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.

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Side navigation.

css/modular.css - includes any modular, reusable CSS rules like .left and .leftGutter which are used for the Side navigation.

css/print.css - includes any print specific CSS styles that are used for the Side navigation.

css/responsive.css - includes responsive CSS styles for the Side navigation.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/page.js - includes the JS for functionality/mobile changes.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant change for the Side navigation happens at 950px when the Side navigation collapses and becomes expandable. The Side navigation then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px

Example

View example

Tabs


Description

Tabs are used to display a collection of information which is grouped for ease of understanding.

Example

Research Fellows

Example content vestibulum egestas massa blandit magna dictum, ut dictum urna rhoncus. Phasellus a vehicula nulla. Pellentesque eros felis, suscipit eu sollicitudin lobortis, sagittis accumsan eros. In hac habitasse platea dictumst. Praesent diam arcu, tincidunt vitae velit ut, pharetra congue tortor.

View all current Research Fellows

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Tabs.

modular.css - includes any modular, reusable CSS rules like .cf and .bottomGap which are used for the Tabs.

css/responsive.css - includes the responsive CSS styles for the Tabs

css/print.css - includes any print specific CSS styles that are used for the Tabs.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - Tabs are initialised here.

js/core.1.0.1.js - dependency required for page.js.

js/interact.1.0.0.js - contains JS required for Tabs.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The first significant change for the Tabs happens at 1050px. The second change is at 900px, where it stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Below 900px Below 1050px Above 1050px

Example

View example

Committee accordion


Description

An accordion is a method for displaying sections of data in a coherent manner using a menu which expands and contracts when selected.

Example

Committees

Council

Standing Committee

Working Group

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Committee accordion.

css/modular.css - includes any modular, reusable CSS rules like .left and .doubleBottomGp which are used for the Committee accordion.

css/print.css - includes any print specific CSS styles that are used for the Committee accordion.

css/responsive.css - includes responsive CSS styles for the Committee accordion.

Required JS

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - contains JS required for the Committee accordion.

js/page.js - contains the "reveal" and "lazyLoad" functions required for the Committee accordion.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Committee accordion happen at 1080px, 950px and 690px. The Committee accordion then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 1080px Below 1080px Below 950px Below 690px

Example

View example

Grant/Awards feature


Description

The Grant/Awards feature is used to showcase select information and provide relevant links.

Examples

Grants

Awards

Copley Medal

This medal is awarded for outstanding achievements in the physical sciences in odd years and the biological sciences in even years.

Royal Medals

These medals are awarded for the most important contributions in the physical, biological and applied sciences.

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Grant/Awards feature.

css/modular.css - includes any modular, reusable CSS rules like .left and .doubleBottomGp which are used for the Grant/Awards feature.

css/print.css - includes any print specific CSS styles that are used for the Grant/Awards feature.

css/responsive.css - includes responsive CSS styles for the Grant/Awards feature.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/rolodex.js - contains JS for the Rolodex functionality

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The Grant/Awards feature changes layout at 1150px screen width (also on 730px and 520px but follows the same layout more or less) - The two sections on the right side are relocated below the first big image to fit the smaller screen.

Below 1150px Below 730px Below 520px

There is also a significant change at 420px - all the sections are rearranged to be below one another to fit on a mobile device.

Below 420px

Example

View Grant example View Awards example

Policy/Journal feature


Description

The Policy/Journal feature is used to showcase select information and provide relevant links.

Example

Journals

Explore our scientific journals and find out more about the benefits to authors and readers.

Authors

We offer a first-class level of author service, high production values and worldwide dissemination in well-read and highly-cited journals.

View benefits for authors

Librarians

We offer 350 years of research across the whole of science, at transparent prices and with perpetual access to subscribed years.

View benefits for institutions

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Policy/Journal feature.

css/modular.css - includes any modular, reusable CSS rules like .left and .doubleBottomGp which are used for the Policy/Journal feature.

css/print.css - includes any print specific CSS styles that are used for the Policy/Journal feature.

css/responsive.css - includes responsive CSS styles for the Policy/Journal feature.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant change for the Policy/Journal feature happens at 950px when the sections of the layout stack on top of each other. The Policy/Journal feature then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Below 950px

Example

View example

Rolodex


Description

The Rolodex is a vertical slider used to display featured content with an image, title, description and link.

Example

  • The Davy lamp

    Sir Humphry Davy (1778-1829) was a chemist, but perhaps is best known for inventing the miners’ safety-lamp, a lamp that would not cause explosions when gas was present in mines. 

    Read more
  • A Nobel laureate

    Dorothy Crowfoot Hodgkin OM FRS (1910-1994) was a leading biochemist and a pioneer in the field of protein crystallography. She received a Nobel Prize in Chemistry in 1964, the first British woman to be so honoured.

    Read more
  • Hooke’s micrographia

    This is the world’s first illustrated book of microscopic observations. Robert Hooke investigated many everyday objects through the microscope, including a feather, mould, a razor’s edge, finely woven cloth, and even a full stop printed in a book.

    Read more
  • Principia mathematica

    The manuscript of Sir Isaac Newton’s work, philosophiae naturalis principia mathematica (1687, mathematical principles of natural philosophy), is the Royal Society’s greatest treasure and a cornerstone of scientific thought.

    Read more
  • The art and science of Richard Waller

    The paintings of Richard Waller FRS (c. 1660-1715) are technically brilliant and years ahead of their time. His groundbreaking set of botanical watercolours was intended to illustrate a catalogue of plants.

    Read more
  • A view of Vesuvius

    Sir William Hamilton FRS (1731-1803) arrived in Naples in 1764, intent on a systematic study of modern volcanic eruptions. He employed a monk, Antonio Piaggi, to keep daily written observations and pencil sketches of activity at Vesuvius. 

    Read more

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Rolodex.

css/modular.css - includes any modular, reusable CSS rules like .left and .doubleBottomGap which are used for the Rolodex.

css/print.css - includes any print specific CSS styles that are used for the Rolodex.

css/responsive.css - includes responsive CSS styles for the Rolodex.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/rolodex.js - contains JS for the Rolodex functionality.

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant change for the Rolodex happens at 760px when the Rolodex changes into a simple select input with content that changes when different options are selected. The Rolodex then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Below 760px Above 760px

Example

View example

People card


Description

The People card is used to display information about Fellows within search listings like the Fellow search. They include an image, name and elected year on the front and name, membership type, elected year and scientific areas on the back.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the People card.

css/responsive.css - includes the responsive CSS styles for the People card.

css/modular.css - includes any reusable CSS rules like .noMargin, .bottomGap, .left which are used for the People card.

css/print.css - includes any print specific CSS styles that are used for the People card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for card flip.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the People card happen at 1080px, 950px, 690px and 500px when the maximum number of cards per row changes to make the most of the available space. Please see screenshots of before and after below.

Above 1080px Below 1080px Below 950px Below 690px Below 500px

Example

View example

Event card


Description

The Event card is used to display information about upcoming and past events within the events listing. They include an image, name and caption on the front and additional description on the back.

Example

  • The monster at the heart of our galaxy

    Prize lecture

    01 March 2016

  • The monster at the heart of our galaxy

    01 March 2016

    6-9 Carlton House Terrace, London, SW1Y 5AG

    • Series: Prize lecture

    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.

  • The monster at the heart of our galaxy

    Prize lecture

    01 March 2016

  • The monster at the heart of our galaxy

    01 March 2016

    6-9 Carlton House Terrace, London, SW1Y 5AG

    • Series: Prize lecture

    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.

  • The monster at the heart of our galaxy

    Prize lecture

    01 March 2016

  • The monster at the heart of our galaxy

    01 March 2016

    6-9 Carlton House Terrace, London, SW1Y 5AG

    • Series: Prize lecture

    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.

  • The monster at the heart of our galaxy

    Prize lecture

    01 March 2016

  • The monster at the heart of our galaxy

    01 March 2016

    6-9 Carlton House Terrace, London, SW1Y 5AG

    • Series: Prize lecture

    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.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Event card.

css/responsive.css - includes the responsive CSS styles for the Event card.

css/modular.css - includes any reusable CSS rules like .noMargin, .bottomGap, .left which are used for the Event card.

css/print.css - includes any print specific CSS styles that are used for the Event card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for card flip.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Event card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Event card then stay the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Grant/Award card


Description

The Grant/Award card is used to display information about Grants and Awards within the the Grants and Awards listings. They include an image, title and link on the front and title and description on the back.

Example

  • Dorothy Hodgkin Fellowship

  • Dorothy Hodgkin Fellowship

    A scheme for outstanding scientists in the UK at an early stage of their research career who require a flexible working pattern due to personal circumstances such as parenting or caring responsibilities or health issues.

    Closing date: 12 January 2016

  • Dorothy Hodgkin Fellowship

  • Dorothy Hodgkin Fellowship

    A scheme for outstanding scientists in the UK at an early stage of their research career who require a flexible working pattern due to personal circumstances such as parenting or caring responsibilities or health issues.

    Closing date: 12 January 2016

  • Dorothy Hodgkin Fellowship

  • Dorothy Hodgkin Fellowship

    A scheme for outstanding scientists in the UK at an early stage of their research career who require a flexible working pattern due to personal circumstances such as parenting or caring responsibilities or health issues.

    Closing date: 12 January 2016

  • Dorothy Hodgkin Fellowship

  • Dorothy Hodgkin Fellowship

    A scheme for outstanding scientists in the UK at an early stage of their research career who require a flexible working pattern due to personal circumstances such as parenting or caring responsibilities or health issues.

    Closing date: 12 January 2016

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Grant/Award card.

css/responsive.css - includes the responsive CSS styles for the Grant/Award card.

css/modular.css - includes any reusable CSS rules like .noMargin, .bottomGap, .left which are used for the Grant/Award card.

css/print.css - includes any print specific CSS styles that are used for the Grant/Award card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for card flip.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Grant/Award card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Grant/Award card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Blog post card


Description

The Blog post card is used to display links to blog posts. They include a title, link, image, date and author.

Example

The Repository: history of science blog

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Blog post card.

css/responsive.css - includes the responsive CSS styles for the Blog post card.

css/modular.css - includes any reusable CSS rules like .noMargin which are used for the Blog post card.

css/print.css - includes any print specific CSS styles that are used for the Blog post card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains additional site JS.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Blog post card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Blog post card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Video podcast card


Description

The Video podcast card is used to display links to video podcasts. They include a title, link, subtitle, image, date and author.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Video podcast card.

css/responsive.css - includes the responsive CSS styles for the Video podcast card.

css/modular.css - includes any reusable CSS rules like .noMargin which are used for the Video podcast card.

css/print.css - includes any print specific CSS styles that are used for the Video podcast card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains additional site JS.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support.

Significant responsive state changes

The significant changes for the Video podcast card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Video podcast card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Project card


Description

The Project card is used on projects page to show both current and past projects. It consists of a title, description, image and link through to the project detail page.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Project card.

css/responsive.css - includes the responsive CSS styles for the Project card.

css/modular.css - includes any reusable CSS rules like .noMargin, .bottomGap, .left which are used for the Project card.

css/print.css - includes any print specific CSS styles that are used for the Project card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant changes for the Project card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Project card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Journal card


Description

The Journal card is used on the journals page to display current journals. The front consists of a title, sub-title and link and on the reverse there is a description. The Journal card also has several different colour themes which are dark grey, green, blue, purple, light grey and red. Red is the default option and the other options are applied by adding the relevant class (see example).

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Journal card.

css/responsive.css - includes the responsive CSS styles for the Journal card.

css/print.css - includes any print specific CSS styles that are used for the Journal card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/main.js - contains the main site JS.

js/page.js - contains the additional site JS.

js/imageSizes.js - contains JS for lazy loading images. Uses container size and pixel ratio to establish which size image to display and then lazy load it.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant changes for the Journal card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Journal card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

View example

Committee card

Description

The Committee card is used to show relevant information about a Committee. They consist of a title, link and image on the front and a title on the back.

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Committee card.

css/modular.css - includes any modular, reusable CSS rules like .left and .halfBottomGp which are used for the Committee card.

css/print.css - includes any print specific CSS styles that are used for the Committee card.

css/responsive.css - includes responsive CSS styles for the Committee card.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for the Committee card.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support

Significant responsive state changes

The significant changes for the Committee card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Committee card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 1080px Below 1080px Below 950px Below 690px

Example

View example

Medallist card


Description

The Medallist card is used to display information about Fellows who have won awards. They include an image, name and link on the front and name, membership type, elected year and scientific areas on the back and also the medal/award they have won above the card.

Example

Copley Medal
Copley Medal
Copley Medal
Copley Medal

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the medallist element.

css/modular.css - includes any modular, reusable CSS rules like .left and .halfBottomGp which are used for the medallist element.

css/print.css - includes any print specific CSS styles that are used for the medallist element.

css/responsive.css - includes responsive CSS styles for the medallist element.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for the Medallist pod.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support

Significant responsive state changes

The significant changes for the Medallist card happen at 950px and 520px when the maximum number of cards per row changes to make the most of the available space. The Medallist card then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 1080px Below 1080px Below 950px Below 690px

Example

View example

Date/Time element


Description

The Date/Time element is used to show the start and end date/times within various sections of the site including the events.

Example

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Date/Time element.

css/modular.css - includes any modular, reusable CSS rules like .left and .halfBottomGp which are used for the Date/Time element.

css/print.css - includes any print specific CSS styles that are used for the Date/Time element.

css/responsive.css - includes responsive CSS styles for the Date/Time element.

Required JavaScript

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support

Significant responsive state changes

The significant change for the Date/Time element happens at 550px when they stack on top of each other. The Date/Time element then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 550px

Example

View example

Sticky registration panel


Description

The Sticky registration panel can be found on the right side of event detail pages. They use jQuery to follow the user as he scrolls down the page. This was meant to be used on the very last content section on a page as it follows the screen until the user is at the end of the page. If there are any content sections below the one with a Sticky registration panel, the Sticky registration panel will cover any content directly behind it as it follows the user down the page. For a functional example please click here.

Example

Main Content Area

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.

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.

Register for this event

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

£35

Request an invitation

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.

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.

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.

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.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Sticky registration panel.

css/responsive.css - includes the responsive CSS styles for the Sticky registration panel.

css/modular.css - includes any reusable CSS rules like .leftGutter, .bottomGap and .left which are used for the Sticky registration panel.

css/print.css - includes any print specific CSS styles that are used for the Sticky registration panel.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for the Sticky registration panel to follow the screen on scroll.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant change for the Sticky registration panel happens at 950px when the The Sticky registration panel is hidden and replaced by a static version. At 640px the static version spans the full width of the viewport. The Sticky registration panel then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 640px

Example

View example

Show more


Description

The show more button that appears on the full biography pages to display hidden content on the page.

Example

Tim Bliss is a neuroscientist whose work has done much to provide a neural explanation for learning and memory. Studying the hippocampus — the memory centre of the brain — Tim showed that the strength of signals between neurons in the brain exhibits a long-term increase following brief but intense activation, a phenomenon known as long-term potentiation (LTP).

Synapses are specialist junctions between nerve cells, where release of a chemical from one nerve cell influences the excitability of its neighbour. Tim’s detailed description of hippocampal LTP, with physiologist Terje Lømo who first noted the phenomenon, confirmed that high-frequency patterns of synaptic firing can induce lasting changes in synaptic strength. LTP is now the most widely studied model of memory storage.

Whilst LTP was discovered in Oslo in the lab of Per Andersen, Tim’s subsequent research into the cellular properties of LTP and its relation to memory was conducted at London’s National Institute for Medical Research. Tim was a founding Fellow of the Academy of Medical Sciences and has received several international awards for his work.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Show more.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/page.js - contains JS required for the Show more to expand and dropdown and reveal the additional content.

Significant responsive state changes

The significant changes for the Show more happens at 950px and 520px when the Show more spans the full width of the page and the number of visible words changes. The Show more then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Below 950px Below 520px

Example

View example

Event organiser


Description

The Event organiser sections displays information about the speakers in a dropdown.

Example

Event organisers

Select an organiser for more information

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Event organiser.

css/responsive.css - includes the responsive CSS styles for the Event organiser.

css/modular.css - includes any reusable CSS rules like .hidden which are used for the Event organiser.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/page.js - contains JS required for the Event organiser to scroll the screen.

Significant responsive state changes

The significant changes for the Event Orgainser happens at 950px and 640px when the number of organisers per row changes to make the most of available space. The Event Orgainser then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 640px

Example

View example

Event session


Description

The Event session section displays information about an event's schedule including speaker information.

Example

Schedule of talks

09 March

09:00-12:30

Session 1

1 talk Show detail Hide detail

Chairs

Professor Sarah Gurr, University of Exeter, UK

09:05-09:30 Genomics of emerging fungal infections

Dr Rhys Farrer, The Broad Institute of Harvard and MIT, USA

Abstract

Nearly half of all amphibian species are declining globally due to factors such as habitat loss and disease. Two related fungal pathogens (Batrachochytrium dendrobatidis; Bd and the recently identified Batrachochytrium salamandrivorans; Bsal) have been attributed to these global declines and extinctions; these pathogens differ in host range and infection pathology, with Bsal infection restricted to salamanders and newts and causing greater erosive dermal lesions. Here, we compare the genome content and gene expression during infection revealing fundamental differences in the molecular basis of pathogenesis. Notably, we identified a new subgroup of genes involved in host-tissue breakdown and invasion in Bsal, correlating with increased pathology in Salamanders. Conversely, the generalist Bd has a unique expansion of Crinkler-like genes, and differences in their lectin-like carbohydrate binding module 18 genes thought to mask host chitin-recognition, perhaps enabling its broader host range. We found that these key pathogenicity factors were differentially expressed in the presence of the host, and that the host response is highly distinct to the two pathogens. Together, these analyses demonstrate the divergent infection strategies and immune response to within this amphibian-killing genus.

Show speakers

12:30-13:30Lunch

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Event session.

css/responsive.css - includes the responsive CSS styles for the Event session.

css/modular.css - includes any reusable CSS rules like .right which are used for the Event session.

css/print.css - includes any print specific CSS styles that are used for the Event session.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/page.js - contains JS required for the Event session to expand them.

Significant responsive state changes

The significant changes for the Event session happen at 950px and 640px. The Event session then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Open

Above 950px Below 950px Below 640px

Closed

Above 950px Below 950px Below 640px

Example

View example

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Search bar.

css/responsive.css - includes the responsive CSS styles for the Search bar.

css/modular.css - includes any reusable CSS rules like .right which are used for the Search bar.

css/print.css - includes any print specific CSS styles that are used for the Search bar.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for the sticky panel to follow the screen on scroll.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

AngularJS: All angular app files

Significant responsive state changes

The significant changes for the Search bar happen at 950px and 520px when the number of organisers per row changes to make the most of available space. The Search bar then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Open

Above 950px Below 950px Below 520px

Example

View example

Article contact

Description

The Article contact is used to provide contact information for a fellow. The contact information includes a name, short description, telephone number and email address.

Example

Main content area

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.

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.

Key contact: James Wilson

James is the central point of contact for lorem ipsum dolor sit amet.

Phone 020 81434967

Email wilson.james@royalsociety.org

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Article contact.

css/responsive.css - includes the responsive CSS styles for the Article contact.

css/modular.css - includes any reusable CSS rules like .right which are used for the Article contact.

css/print.css - includes any print specific CSS styles that are used for the Article contact.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

js/ie8.js - JS polyfills and fallbacks for CSS items that lack IE8 support

Significant responsive state changes

The significant changes for the Article contact happen at 950px and 520px when the number of organisers per row changes to make the most of available space. The Article contact then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

This element is not currently used on the live website.

Fellow calendar

Description

The Fellow calendar is used to display upcoming events. Events are shown with the following information date and title. There are also links underneath.

Please note - In the RW solution this components functionality and data is powered its .ascx file backend code.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Fellow calendar.

css/responsive.css - includes the responsive CSS styles for the Fellow calendar.

css/modular.css - includes any reusable CSS rules like .right which are used for the Fellow calendar.

css/print.css - includes any print specific CSS styles that are used for the Fellow calendar.

Required JavaScript

jquery.min.js - jQuery version 1.11.1 referenced externally.

js/page.js - contains JS required for the Fellow calendar.

js/main.js - contains the main site JS.

js/interact.1.0.0.js - dependency required for page.js and main.js.

js/core.1.0.1.js - dependency required for page.js and main.js.

js/respond.min.js - min/max-width media query polyfill for older versions of IE.

Significant responsive state changes

The significant changes for the Fellow calendar happen at 950px and 520px when the number of organisers per row changes to make the most of available space. The Fellow calendar then stays the same all the way down to lowest viewport (320px). Please see screenshots of before and after below.

Above 950px Below 950px Below 520px

Example

This is within the user account section.

Low


Collapsible forms


Description

Standard form which is hidden by default, but slides open when the link is clicked.

Example

Make a booking enquiry

Please complete this form and our venue hire team will contact you soon.

Show booking form

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Collapsible forms

css/modular.css - includes any modular, reusable CSS rules like .cf:before, .cf:after and .noMargin which are used for the Collapsible forms.

css/responsive.css - includes responsive CSS styles for the Collapsible forms.

Example

View example

Homepage feature


Description

The Homepage feature is a widescreen card that can be used to display featured content with an image, title, description, category, link and additional description on the flipside.

Example

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Homepage feature.

css/modular.css - includes any modular, reusable CSS rules like .left and .fullWidth which may be used for the Homepage feature.

css/print.css - includes any print specific CSS styles that are used for the Homepage feature.

css/responsive.css - includes responsive CSS styles for the Homepage feature.

Example

View example

About us spotlight


Description

The About us spotlight Pods are located on the About Us page just below the full width feature image. They include and image, title, description and link.

Example

Our history

Learn about our origins in an ‘invisible college’ of natural philosophers, and the meaning of our motto ‘Nullius in verba’

Explore our history

Our history

Learn about our origins in an ‘invisible college’ of natural philosophers, and the meaning of our motto ‘Nullius in verba’

Explore our history

Example markup

Required CSS

css/main.css - includes the main CSS styles for the about us Spotlight Pods.

css/responsive.css - includes the responsive CSS styles for the about us Spotlight Pods.

css/modular.css - includes any reusable CSS rules like .largeText and .noMargin which are used for the Spotlight Pods.

Example

View example

Two column content pod


Description

Content pod with 50% width that contains 2 columns of text with a link to further information

Example

Journals

Explore our journals

We publish journals across the entire range of science. Find out more about how to read and submit articles.

Open access

We support open access and all our journals are fully compliant with funder mandates.

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Two column content pods.

css/modular.css - includes any modular, reusable CSS rules like .cf:before, .cf:after, .left, .rightGutter, .halfWidth which are used for the Two column content pods.

css/responsive.css - includes responsive CSS styles for the Two column content pods.

Example

View example

Event feature


Description

The Event feature is used to showcase select information and provide relevant links.

Example

Events

Public events

Artist's illustration of a supermassive black hole.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Event feature.

css/responsive.css - includes the responsive CSS styles for the Event feature.

css/modular.css - includes any reusable CSS rules like .noMargin, .threeQuarterRatio, .twoCol which are used for the Event feature.

css/print.css - includes any print specific CSS styles that are used for the Event feature.

Example

View example

Topic grid


Description

The Topic grid is used to show a selection of topics. Each topic that is displayed includes both an image and a title with a link.

Example

Agriculture and food
Diversity in science
Economy and development
Education and skills
Energy, environment and climate
Ethics and conduct
Funding, governance and careers
Health and wellbeing
Industry and innovation
New and emerging technology
Open science and data
Security and risk

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Topic grid.

css/modular.css - includes any modular, reusable CSS rules like .bottomGap which may be used for the Topic grid.

css/print.css - includes any print specific CSS styles that are used for the Topic grid.

css/responsive.css - includes responsive CSS styles for the Topic grid.

Example

View example

Venue hire feature


Description

The Venue hire feature is used to showcase rooms that are available to hire at The Royal Society. Each Room has a title, image, short description and link.

Example

Drinks receptions

Top Left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur nisi eget nisi ultrices laoreet. Find out more

Presentations

Bottom Left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur nisi eget nisi ultrices laoreet. Find out more

Private dinners

Top Right Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur nisi eget nisi ultrices laoreet. Find out more

Special events

Bottom Right Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consectetur nisi eget nisi ultrices laoreet. Find out more

Drinks receptions
Presentations
Private dinners
Special events

Required CSS

css/main.css - incudes the main CSS styles for the Venue hire feature.

css/modular.css - includes any modular, reusable CSS rules like .halfBottomGp which are used for the Venue hire feature.

css/print.css - includes any print specific CSS styles that are used for the Venue hire feature.

css/responsive.css - includes responsive CSS styles for the Venue hire feature.

Example

This component is not currently used on the live website.

Gallery bar

Description

The Gallery bar displays a gallery of images with links to their respective pages.

Example

Audio-visual services

Catering

Perfect location

Room hire rates

Example markup

Required CSS

css/main.css - incudes the main CSS styles for the Gallery bar.

css/modular.css - includes any modular, reusable CSS rules like .left and .halfBottomGp which are used for the Gallery bar.

css/print.css - includes any print specific CSS styles that are used for the Gallery bar.

css/responsive.css - includes responsive CSS styles for the Gallery bar.

Example

View example

Buttons


Description

Clickable elements like a tags, buttons and inputs can be stylised to appear like a button.

Examples

Common button styles

Button with border bottom

This is the primary button style used throughout the site. It is used for links of which their main function is to navigate the user around the various pages of the website.

Visit site

Button with rounded corners

This is the secondary button style. This style is normally reserved for buttons which are submitting a form/action for example the fellow search on the Fellowship Directory page.

View more

Additional button styles

These are variations of the common button styles which are available to use if needed.

Basic button

Find out more

Button with rounded corners and border bottom

Read more

Example markup

Basic button

Button with border bottom

Button with rounded corners

Button with rounded corners and border bottom

Required CSS

css/main.css - incudes the main CSS styles for buttons.

css/print.css - includes any print specific CSS styles that are used for buttons.

css/responsive.css - includes responsive CSS styles for buttons.

Example

View example

Input boxes


Description

Input boxes are used on most pages on the RS website. In login forms, and on most sections that have a search function to filter content on the page.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Input boxes.

css/responsive.css - includes the responsive CSS styles for the Input boxes.

Example

View example

Checkboxes and radio buttons


Description

Radio buttons and checkboxes are used on pages with a lot of content like the Fellows Directory as additional filter and sort options.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the checkboxes and radio buttons.

css/responsive.css - includes the responsive CSS styles for the checkboxes and radio buttons.

css/modular.css - includes any reusable CSS rules like .left which are used for the checkboxes and radio buttons.

Example

View example

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Drop Down Box.

css/responsive.css - includes the responsive CSS styles for the Drop Down Box.

css/modular.css - includes any reusable CSS rules like .left which are used for the Drop Down Box.

Example

View example

Multi Select Box

Description

The Multi Select Box allows the user to move options between multi select boxes in order to make multiple selections.

Please note - this component is within the profile update section.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Multi Select Box.

css/responsive.css - includes the responsive CSS styles for the Multi Select Box.

css/modular.css - includes any reusable CSS rules like .left and .bottomGap which are used for the Multi Select Box.

Example

An example of this component can be viewed within the profile update section. To access the profile update section a login will be required.

Sort options


Description

Checkboxes are used on pages with a lot of content for additional filter options.

Example

Sort by:

Example markup

Required CSS

css/main.css - includes the main CSS styles for the checkboxes.

css/responsive.css - includes the responsive CSS styles for the checkboxes.

Example

View example

Show more/Pagination


Description

Show more/Pagination is used on pages like Events and Fellows.

Example

1594 results

Show more results

Show 12 | 24 | 48 | 96

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Show more/Pagination.

css/responsive.css - includes the responsive CSS styles for the Show more/Pagination.

css/modular.css - includes any reusable CSS rules like .bottomGap, .alignRight which are used for the Show more/Pagination.

Example

View example

Displaying form feedback


Description

Feedback for form inputs that are incorrectly submitted are displayed as a small notifications as in the example below. They consist of a small warning icon with a short description of the error that has occurred.

Example

To request a callback please complete this form.

Please enter your telephone number Please enter a callback time Submit

Example markup

Required CSS

css/main.css - incudes the main CSS styles for form feedback notifications.

css/modular.css - includes any modular, reusable CSS rules like .clear and .left which may be used for form feedback notifications.

css/print.css - includes any print specific CSS styles that are used for form feedback notifications.

css/responsive.css - includes responsive CSS styles for form feedback notifications.

Example

Please see functional examples below on the live RS website. The forms are shown on click of the "Show booking form" and "Show callback form" and on submission with either empty or incorrect fields the form feedback will be shown.

View example

Example

You may be interested in:

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Related links.

css/responsive.css - includes the responsive CSS styles for the Related links.

css/modular.css - includes any reusable CSS rules like .bottomGap, .leftGutter, .right which are used for the Related links.

css/print.css - includes any print specific CSS styles that are used for the Related links.

Example

View example

Download


Description

Download sections always expand to fit the full width of its container.

Download

Main Content Area

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.

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.

Example markup

Required CSS

css/main.css - includes the main CSS styles for the download section.

css/responsive.css - includes the responsive CSS styles for the download section.

css/modular.css - includes any reusable CSS rules like .right, .leftGutter, .oneThirdWidth which are used for the download section.

Example

View example

Quote


Description

Quotes are used to highlight a statement.

Example

I want to let you know what a pleasure it was to publish my manuscript in Open Biology. These days it is hard to find a journal that is open to publishing ideas and is both fast and fair, but Open Biology offers exactly that! The sooner work is published the better so I will certainly consider Open Biology again for future articles. Thank you for being on my (and science’s) side!

Dr James D. Watson ForMemRS, Cold Spring Harbor Laboratory, USA

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Quote.

css/responsive.css - includes the responsive CSS styles for the Quote.

css/modular.css - includes any reusable CSS rules like .bottomGap which are used for the Quote.

Example

View example

Scheme application


Description

Scheme applications are used on specific grant pages to provide download links and an application link or instructions for applying.

Example

Example markup

Required CSS

css/main.css - includes the main CSS styles for the Scheme application.

css/responsive.css - includes the responsive CSS styles for the Scheme application.

css/modular.css - includes any reusable CSS rules like .doubleBottomGap, .noMargin which are used for the Scheme application.

Example

View example

Statement


Description

Introductory homepage text with a link to a new page.

Example

We are the independent scientific academy of the UK and the Commonwealth, dedicated to promoting excellence in science More about us

Example markup

Required CSS

css/main.css - includes the main CSS styles for the statement.

css/responsive.css - includes responsive CSS styles for the statement.

css/print.css - includes any print specific CSS styles that are used for the statement.

Example

View example