MRS Style Guide


Basic Concepts

Advanced User/Developer Note: If you're familiar with CSS concepts, this site is using the Bootstrap and most of its classes are available, but customized for this site. Here is a (third-party) cheat sheet you can use for all the classes available: https://getbootstrap.com/docs/5.3. Almost all of the classes will be available but any that deal with color or font sizes may not be exactly reflected on the site.

In this style guide you will frequently see text that looks like this (black background, orange text, monospace). Text given this specific format is a class name, which is a CSS concept that allows you to create visual effects and assign them to HTML elements.

You will also see text that looks like this (grey background, black text, monospace). Text given this format is an example of an element or other HTML code.

There are two ways to add class names: on a layout level and on a content level.

sample-class

When you're editing a layout block you'll see an interface like the one on the left. You can add the class that you're adding either to your entire layout block, or if it has columns like this one, only to one column. Styles you'd like to apply to the whole layout block go in the Row field, and styles for an individual column should go in that column's corresponding Column X field.

For example, this column has the styles bg-gray, text-secondary, and p-4 forcing the background to gray, forcing the text to be the site's secondary color (dark blue), and adding some padding inside.

Note that sometimes this will not work out the way you might expect because the styles have priorities. For example, unless you use the next method, links will always be the "secondary" color: teal.

Unless told otherwise by this style guide, you probably shouldn't remove the class names that are already there since they are responsible for the styles provided to the layout by default.

You can also add classes to elements in your content. For example, if we want a paragraph to be dark blue, like this one, we can add the text-primary class like above, but in the HTML markup.

We'll need to add this by finding the paragraph element that looks like <p> and adding a class to it. If we add class="text-primary" to that element, so that it looks like <p class="text-primary"> it will now be dark blue. Make sure you don't remove the <> characters around it, and make sure to enclose your class names in double quotes.


Layout

Columns and other special treatments can be achieved easily using the custom Layout blocks. Color has been added to each column so you can see the divisions clearly.

This is a grid-12 layout block.

This is a grid-6+6 layout block.

This is a grid-6+6 layout block.

When you want colored rows, there are a few extra steps:

  • Don't apply the colors on the columns layout block. Instead, place a plain-div layout block in the columns and apply the colors to that.
  • There are a few utility things you can add to the row (the top level layout block) to change how it works:
    • You can add equal-heights to make it so the color boxes in that row will take up the full height.
    • You can add remove-last-margin to remove the bottom margin on the last paragraph or header (so the spacing will be even).
    • You can add g-0 to remove the spacing between the columns (if you want the colors to be right next to each other).
    • Usually when making a color stripe like the above, you'll want all three of these, so there's a special class for this: row--color which includes all three of these behaviors. But if you want some but not all (like you want to keep the space between the columns) you'll need to add these individually (so for the equal heights and removed last margin add equal-heights remove-last-margin).

This is a row with none of the above utility classes added. You can see that there is spacing between the colors, the heights aren't forced to be equal, and the bottom margin on the paragraph is visible so the spacing on the top and the bottom aren't even.

This is a grid-8+4 layout block.

This is a grid-4+8 layout block.

This row has the row--color class added. This should really be your default if you are making a row with both columns having color. Make sure to add the same spacing class to each colored element, usually p-4 will be the one you want. Notice how the spacing looks very even here and the colored boxes stay the same height.

This row has the remove-last-margin equal-heights classes, so similar to the default but with space between the items. Use this if you want color on both columns but still to have separation between them.

This is a grid-9+3 layout block.

This is a grid-3+9 layout block.

If you want a solid color row (so all the same color) you can set up a colored block you would inside an individual column, then just add the columns inside of it. You should add remove-last-margin to either the row or the plain-div that you added to keep the spacing consistent.

If you want a sort of floating sidebar block of color, but the main column has no color, you only need to put the plain-div container in the column that needs color. You should add remove-last-margin to it to keep the internal spacing consistent.

This is a grid-9+3 layout block.

This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

This is a grid-3+3+3+3 layout block.

This is a grid-3+3+3+3 layout block.

This is a grid-3+3+3+3 layout block.

This is a grid-3+3+3+3 layout block.

This is a grid-2+3+2+3+2 layout block.
This is a grid-2+3+2+3+2 layout block.
This is a grid-2+3+2+3+2 layout block.
This is a grid-2+3+2+3+2 layout block.
This is a grid-2+3+2+3+2 layout block.

You can add dividers between columns with the divided-columns class.

This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

You can center divided columns with the center-inside class.

This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block. This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

This is a grid-4+4+4 layout block.

These columns are in a container with some default margin on the bottom. If you want to remove the bottom margin simply delete the mb-3 class name from the Row part of the layout block. You can also add other spacing class names here. See below in the Spacing section.


Spacing

Quick Tips for Spacing

  • Making a colored box that's inside the page container? Use p-4 bg-[color], like p-4 bg-primary.
  • Making a full-width colored box? Use py-5. If you don't want other content to be right up next to it vertically, add my-5 as well.

Detailed Spacing Info

There are spacing class names to add two different kinds of spacing: margin and padding. Margin is space on the outside of an element, padding is space on the inside.

You usually want to use margin if you are trying to create space between elements, for example, it's at the bottom of every paragraph, header, and column layout block by default.

You want to use padding when you want to create space inside of an element. The main time to do this is if you have a background color on the element and you don't want the text/other content to go right up to the edges of your element.

Margin and padding can be added to all sides of an element, horizontal or vertical axes, or individual sides. The class names always follow the same pattern: <type of spacing><direction>-<amount>.

The type of spacing is either m for margin or p for padding.

The direction can be left out to add the space on all sides of an element, or any of these: x (horizontal) y (vertical) t (top) b (bottom) s (left) or e (right). (The left and right are s and e respectively for "start" and "end". The reason for this is that some languages go right-to-left, so those sides will be reversed.)

The number is a whole number from 0-5, representing increasing amounts of space. This scales up slowly:

  • 0 - no margin/padding
  • 1 - 0.25rem / 4px margin/padding
  • 2 - 0.5rem / 8px margin/padding
  • 3 - 1rem / 16px margin/padding
  • 4 - 1.5rem / 24px margin/padding
  • 5 - 3rem / 48px margin/padding

Examples are given below. The class names shown on each block are just the spacing ones, there are also additional ones added as a background color to easier see the padding.

p-0

p-1

p-2

p-3

p-4

p-5


Typography

Headers have automatic styles applied and shouldn't usually need adjusting. You should try to use descending headers (starting with h2) because that's what works best for SEO.

Try to think of your page as an outline: you typically want any h3 to be preceded by an h2. So if you have subtopics after an h2, you can add an h3 but shouldn't add an h4 unless you're breaking it down even further.

If you want to apply a visual style similar to a header because you need to call more attention to something, you can mimic the different header styles by using classes like h2, where h2 can be changed to any of the header levels.

This is a paragraph using h5 class, but isn't an actual h5.


Text Styles:


H1: Noto Sans Display Semibold / 52px
2024 Fall Meeting & Exhibit

 

H2: Noto Sans Display Semibold / 48px
2024 Fall Meeting & Exhibit

 

H3: Noto Sans Display Semibold / 33px
2024 Fall Meeting & Exhibit

 

H4: Noto Sans Display Semibold / 24px
2024 Fall Meeting & Exhibit

 

H5: Noto Sans Display Semibold / 20px
2024 Fall Meeting & Exhibit

Body/Strong: Noto Sans Regular/Semibold / 18PX

Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.

Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.

BLOCKQUOTE: NOTO SANS ITALIC / 32PX
“The great thing about MRS is the interaction with all of the different people, including the volunteers and the staff. We have by-and-large a group of volunteers and staff that are highly competent, that are dedicated and hard-working people who put the society and the needs of the membership and the community ahead of their own personal needs.”

Unordered List: Noto Sans Regular / 18px

  • Proposals for symposia at MRS Meetings are solicited approximately 18 months in advance of a Meeting.

  • MRS requires a diversified group of four co-organizers with respect to gender and under-represented groups, region, emphasis (fundamental vs applied), and institution. Inclusion of translational research and industrial involvement is highly encouraged, as is participation of early-career/postdoc co-organizers.

Ordered List: Noto Sans Regular / 18px

  1. Proposals for symposia at MRS Meetings are solicited approximately 18 months in advance of a Meeting.

  2. MRS requires a diversified group of four co-organizers with respect to gender and under-represented groups, region, emphasis (fundamental vs applied), and institution. Inclusion of translational research and industrial involvement is highly encouraged, as is participation of early-career/postdoc co-organizers.

Colors

Text colors can be changed on the layout or element levels by applying classes that start with text- and a color name. All of the available colors are listed below. (Backgrounds are added for illustrative purposes and will be covered below.)

Class NameColor Example
text-blackThis is some colored text.
text-darkThis is some colored text.
text-whiteThis is some colored text. This is the default text color for dark backgrounds.
text-fadedThis is some colored text.
text-lightThis is some colored text.
text-primaryThis is some colored text.
text-secondaryThis is some colored text. This is the default text color.
text-tertiaryThis is some colored text.
text-successThis is some colored text.
text-warningThis is some colored text.
text-accentThis is some colored text.
text-infoThis is some colored text.

Background colors work the same way and have the same color options, but use the prefix bg-. You should also always consider adding padding when you're using a background. If you're not sure how much, p-4 is a good default to add.

Class NameColor Example
bg-blackThis is some text with a colored background.
bg-darkThis is some text with a colored background.
bg-whiteThis is some text with a colored background.
bg-fadedThis is some text with a colored background.
bg-primaryThis is some text with a colored background.
bg-secondaryThis is some text with a colored background.
bg-tertiaryThis is some text with a colored background.
bg-successThis is some text with a colored background.
bg-warningThis is some text with a colored background.
bg-accentThis is some text with a colored background.
bg-infoThis is some text with a colored background.
bg-lightThis is some text with a colored background.

Buttons

Buttons can be created by adding the button class to an <a> element. The easiest way to create these is to use Sitefinity's link tool to create your link, then simply find the element that looks like <a href="staging.mrs.org"> and adding class="btn" and "btn-<color> just before the >.

Examples are shown below:


Accordion


This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion widget list

Expandable List No Title
test

Read More

test 2 content

test link


Table Styles

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

News Widget

  • Three Highly Esteemed MRS Members among 2024 Kavli Prize Laureates

    Jun 12, 2024

    The Norwegian Academy of Science and Letters announced the 2024 Kavli Prize Laureates in the fields of astrophysics, nanoscience and neuroscience on June 12. Eight scientists from three countries were honored.

  • Diamond Like Carbon Market Research

    Sep 25, 2019

    Diamond-like Carbon [DLC] Market (Type: Pure DLC and Mixed DLC; and Application: Drill Bits & Milling Cutters, Saws & Blades, Dies & Molds, Inserts, and Others) - Global Industry Analysis, Size, Share, Growth, Trends, and Forecast, 2023-2031

  • Diamond Like Carbon PR Newswire

    Mar 20, 2018

    Global Diamond-like Carbon (DLC) Market is Projected to Reach US$ 2.4 Billion by 2025 according to Transparency Market Research.


Event Widget


CTA Widget

Stay In Touch!

Now is the perfect time to set your email preferences with MRS! Log in today and select the events and services that interest you.
SIGN UP FOR EMAIL ALERTS
Exception occured while executing the controller. Check error logs for details.

Stay In Touch!

Now is the perfect time to set your email preferences with MRS! Log in today and select the events and services that interest you.
SIGN UP FOR EMAIL ALERTS

List Icons With Text

Why Become a Member?

MRS empowers individuals in the materials research field with Membership programs, education, Special Interest Groups and resources designed to create an environment where they can thrive and influence the future of materials research.

  • Join a global research community

  • Discounts on premiere MRS events

  • Collaborative networking & knowledge exchange

  • Unlimited resources to help you advance your career


People Widget


Playlist Widget


Iframe with Caption in a 50-50 Container

In this MRS TV interview from the 2013 MRS Fall Meeting, Robert Huggins, a founding member of MRS, talks about the past, present and future direction of the society.
In this MRS TV interview, Julia M. Phillips, 1995 MRS President, discusses her participation in a special MRS 50th Anniversary Symposium X panel discussion.

 


Home Banner Video/Photo carousel


Testimonial

MRS is an incredible community of scholars, innovators, and engineers driven to have a positive impact on the world through new materials. Being an MRS Member gives me access to forefront research spanning materials synthesis, characterization, and applications. The Spring and Fall MRS conferences are among my favorite annual meetings to connect with the community, and the monthly MRS Bulletin is a great way to stay informed about emerging topics in the interim. The MRS community has provided me with the support, inspiration, and resources to accomplish frontier science throughout my career, and I'm grateful to be an MRS Member!

Jennifer A. Dionne

Stanford University


Cards

"Thirds - card" template with all fields

Card Heading

Card description

Label

"Full - card" template  (with no Action Link set) on GRID 6+6 layout

Card Heading

Card description

Harald Ade, North Carolina State University

For seminal contributions leading to the understanding of the morphology of organic thin films and its implications on organic electronic device performance