Inaugural China Conference
Separating Fact from Fiction: China’s Growing Global Influence and its Implications
June 22-23
Hosted by AidData and William & Mary's Global Research Institute
H6 when nested inside .white-text--china
Style Guide
Most (but not all) classes in Webflow are listed on this page, along with examples for common usage.
A Quick Note on Naming
Naming of functional CSS classes more closely resembles other CSS conventions (margin-top--baseline) rather than Webflow template guidelines. Dashes or underscores loosely relate to BEM conventions. If you see "__" (block__element), it means that a class is intended to be used primarily within a certain context. If you see "--" (margin-top--baseline), it means that there are other similarly classes that provide a different value for the setting implied by the name.
Although In general, we strive to follow these three conventions in naming CSS classes:
- Where possible, build components & layout with functional utility classes. These generally do one job everywhere. These can be either "Webflow" style (Font Size 0) or "CSS" style (flex-top-between, margin-top--baseline). The important thing is that the name describes the style function.
- If styling can't be achieved with functional CSS (or for styling elements that are repeated everywhere), use either an object oriented convention to indicate that this applies multiple rules to a specific context on a page, but try to adhere to Webflow's templating guidelines for components that could be slotted almost anywhere (i.e. "Page Sections" not "page-sections"; "White Card Link" not "white-card-link") or a BEM syntax for elements that aren't intended to be reused across pages.*
- If you need a class that modifies another class, try to indicate this with underscores, or is used in a particular set of contextual circumstances. (ex. "is_RTE" or "fits_under_page_nav". )
* For example, "china-page-wrap" not "China Page Wrap" since this class is tied to a background image.
Typography
Responsive Page Label
Responsive Page Title
Responsive Page Subtitle
Paragraphs have 1.5 rem (1 baseline) of bottom margin. Use "margin-0--bottom" to clear this.
Font Size 4, Multiline: 2/2.5
DEFAULT RTE
H1
H2
H3
H4
H5
H6
paragraph
-
.text-center
H1
H2
H3
H4
H5
H6
paragraph
-
RTE Small Text
H1
H2
H3
H4
H5
H6
paragraph
-
RTE Small Text
H1
H2
H3
H4
H5
H6
paragraph
-
////////////////////////
Blog Main RTE
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
- List
Block Quote
Overview
Rigorous impact evaluations in a fraction of the time of an RCT
Geospatial Impact Evaluations (GIEs) measure intended and unintended impacts of development programs by leveraging readily available data like satellite observations to mimic the conditions on the ground in a randomized control trial (RCT) in order to establish a reliable counterfactual for meaningful comparisons — at a fraction of the time and cost of a “traditional” RCT.
Like RCTs, GIEs can estimate the net effect of a specific program by comparing similar groups whose only difference was exposure to the program (or treatment). Unlike RCTs, GIEs use precise geographic data to establish this counterfactual retroactively, eliminating the need to assign program participants into randomized treatment and control groups within the program design.
Related
The Cloudera Foundation awards AidData $1,152,000 to expand use of GeoQuery for social impact
This is a rich text block
Improving resource allocation and evaluating hard-to-measure impacts of global health efforts with next-generation innovation and research
Case Studies
This is not clickable, but is information that is related to the link above. Often this is used in the context where the user's primary goal is scanning a list rather than "going somewhere", or for when we have items which we want to de-emphasize.
When a whole block is clickable, use this convention.
The white background and green stripe indicates interactivity You will probably use card classes in conjunction with each text element within a text wrap.
Layout & Grid Helpers
Content Margins
The class "Page Grid Padding" (.page-grid-padding) bounds content by 4.6875 VW on both the left and right side. That viewport width corresponds to six grid cells in our preferred grid, outlined below.
Additionally the classes "Page Top Padding" and "Page Bottom Padding" add 3 rem (2 baselines) in top and bottom padding. These classes have a different css naming convention than other layout helpers (ex. "margin-top--baseline") to indicate that they have a specific intended use case. You may also use these classes in full-width panels where 2 baselines of padding are needed, but do so recognizing that the value of these classes may change according to the primary use case, which is ensuring that our content appears in a consistent row below the nav bar.
Template Grid
Our content fits in an imaginary 58 column grid.* This enables us to create layouts that can reference evenly spaced columns of 2,3,4,5,6,10 and 12, each separated by 2 grid cells. (We often have 3, 4 or 5 items to fit in a row.) This treatment also allows a column rule between the two grid cells. There are two ways that this grid can be implemented. Each are explained below.
* Counting page margins (explained below) the entirety of the grid is 64 columns wide. 58 columns with 3 columns on either side for page margins. This gives us "rounder" VW numbers for width-based implementation of the grid.
CSS Grid
Webflow makes it ridiculously easy to drag items onto a CSS Grid. Use the "58-wide" (._58-wide) grid helper class to speed up prototyping and improve consistency across the site. This grid provides no column or row gaps and does not change the default number of rows. If you want to edit the grid itself, duplicate the class and rename it.
CSS Grid is especially useful when you need to place overlapping rows and columns, such as on our home page or on a publication detail page, or when you need items to reflow on tablets or mobile devices in a certain way that would lead to less accessible or semantic markup. For example, the sidebar on our blog splits in two when collapsing into smaller viewport widths; half goes above the main content (such as bread crumbs and related publications) while half goes below (such as author information). CSS Grid allows a treatment that provides a better user experience and better reflects the markup on the page.
Flex Basis
Using CSS Grid for everything, however, quickly blows up the stylesheet size, because the row and column settings for each grid child are stored in the unique id for that html element. If you have a layout where a cell would not need to span multiple rows or reflow to a different position on the page, then positioning the element with ID settings is an expensive proposition.
How are these implemented differently?
- With CSS Grid, the Grid Class (58-wide) goes on the parent element. Then, for each direct child element...
- You need to specify values for grid-column-start (1st number shown below), grid-column-end (2nd number), as well as grid-row-start and grid-row-end
- With our "Flex Basis" grid, you use a generic flex helper class, "flex-top-between" and specify the column widths as CSS classes (i.e. col-1-5)
Examples
CSS Grid
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Flex Basis
One critical difference between the CSS Grid implementation and the Flex Basis implementation is that the latter does not as easily allow you to use ruled columns. (We can add that in the future if it looks like that's going to be a feature of our design language that will need to be implemented in many places.)
Another important note: this implementation isn't foolproof. Because there is so much whitespace between smaller columns (i.e. col-1-10, col-1-12), columns intended for the next line can slide onto a row. Conversely, on smaller media queries, because no min or max-width is set, text content these very small columns may overflow their prescribed widths.
Wide Classes
Tablet Classes
These classes have a value set for the tablet media query, which cascades down to mobile devices unless overridden. They do not have a value set for the main, desktop media query.
Mobile Classes
These classes have a value set for the mobile landscape media query. These values also cascade down to the mobile portrait media query unless overridden. They do not have a value set for the main, desktop media query or the tablet media query.
Also, we do not have a separate set of classes for the smaller, mobile portrait media query, and the mobile grid classes stop at 6 columns.
Ruled Columns With Classes (Instead of Grid)
The following templates approximate the ruled columns on the Home page that were done with CSS Grid. The classes "add_1_cell", "clear_1_cell_on_tablet", "clear_1_cell_on_mobile", "clear_col_borders_on_tablet", and "clear_col_borders_on_mobile" can be added to col-1-2.
padding right border right, clear on tablet
padding left, border left, clear on tablet
padding right border right, clear on tablet
No padding no border
no padding, no border
padding left, border left, clear on tablet
padding right border right, clear on mobile
no padding, no border
no padding, no border
padding left, border left, clear on mobile
Margin & Padding
Cards & Repeat Grids
We have 5 classes of cards, which fit into our layout grid.
- Card — This is our basic unit.
- Tall Card — Inherits width of a Card, but defines a set height. This is useful for items with a horizontal picture that goes below a text block.
- Wide Card — Wider than a typical card, which means that it generally occupies 1 less column in a grid. (i.e. Where a Card Grid could fit a maximum of 4 columns, a Wide Card Grid can only accommodate 3.)
- Short Card — Inherits width but has a smaller default minimum row height a card. (96px instead of 192px).
- Small Card — Inherits height from short cards, but also adds an additional column. (i.e. Where a Card Grid could fit a maximum of 4 columns, a Small Card grid could fit five.)
Column gap for each class is 3.125 vw (2 grid cells). Row gap for each class except "Tall Cards" is 1.5rem, which is 1 row of paragraph line height. Row gap for tall cards is 3rem. Until Webflow supports repeat grids natively, we will use custom code for repeat grids. To use a repeat grid, you need a "Card" nested directly within a "Card Grid". (This is especially useful on collection lists.)
.full-width > Card Grid > Card
Section Label + Offset Section > Card Grid > Card
.full-width > Wide Card Grid > Wide Card
Section Label + Offset Section > Wide Card Grid > Wide Card
.full-width > Tall Card Grid > Tall Card
Section Label + Offset Section > Tall Card Grid > Tall Card
.full-width > Small Card Grid > Small Card
Achyuta Adhvaryu
Assistant Professor of Business Economics and Public Policy at the Ross School of Business at the University of Michigan
Alastair Smith
Bernhardt Denmark Chair of International Relations at New York University
Alex Braithwaite
Associate Professor of International Relations at the University of Arizona
Alex Pfaff
Associate Professor of Public Policy, Economics and Environment at Duke University
Allen Blackman
Senior Fellow at Resources for the Future
Amy Selzer
Visiting Assistant Professor of Sociology at the College of William & Mary
Andreas Fuchs
Professor of Development Economics at the University of Goettingen
Andrew Horowitz
Professor of Economics at the Sam M. Walton College of Business at the University of Arkansas
Andrew Zeitlin
Assistant Professor at the McCourt School of Public Policy at Georgetown University
Arilton Teixeira
Director of FUCAPE Business School
.full-width > Small Card Grid > Small Card
Achyuta Adhvaryu
Assistant Professor of Business Economics and Public Policy at the Ross School of Business at the University of Michigan
Alastair Smith
Bernhardt Denmark Chair of International Relations at New York University
Alex Braithwaite
Associate Professor of International Relations at the University of Arizona
Alex Pfaff
Associate Professor of Public Policy, Economics and Environment at Duke University
Allen Blackman
Senior Fellow at Resources for the Future
Amy Selzer
Visiting Assistant Professor of Sociology at the College of William & Mary
Andreas Fuchs
Professor of Development Economics at the University of Goettingen
Andrew Horowitz
Professor of Economics at the Sam M. Walton College of Business at the University of Arkansas
Andrew Zeitlin
Assistant Professor at the McCourt School of Public Policy at Georgetown University
Arilton Teixeira
Director of FUCAPE Business School
Special Case: Logo Cards
The naming of these classes is a historical artifact. The grid is not set on the parent element (i.e. "collection items"); a flex-basis value is set on the child element (i.e. "collection item").
.full-width > flex-left-center > Logo Card