MRS Style Guide
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.
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.
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:
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 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.
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.
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.
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:
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
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.
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
Ordered List: Noto Sans Regular / 18px
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 Name | Color Example |
---|---|
text-black | This is some colored text. |
text-dark | This is some colored text. |
text-white | This is some colored text. This is the default text color for dark backgrounds. |
text-faded | This is some colored text. |
text-light | This is some colored text. |
text-primary | This is some colored text. |
text-secondary | This is some colored text. This is the default text color. |
text-tertiary | This is some colored text. |
text-success | This is some colored text. |
text-warning | This is some colored text. |
text-accent | This is some colored text. |
text-info | This 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 Name | Color Example |
---|---|
bg-black | This is some text with a colored background. |
bg-dark | This is some text with a colored background. |
bg-white | This is some text with a colored background. |
bg-faded | This is some text with a colored background. |
bg-primary | This is some text with a colored background. |
bg-secondary | This is some text with a colored background. |
bg-tertiary | This is some text with a colored background. |
bg-success | This is some text with a colored background. |
bg-warning | This is some text with a colored background. |
bg-accent | This is some text with a colored background. |
bg-info | This is some text with a colored background. |
bg-light | This is some text with a colored background. |
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-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Accordion widget list
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
News Widget
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.
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
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
Presented by MRS and the American Ceramic Society
October 5, 12, 19 and 26, 2021 Presented by MRS and Society for Biomaterials
Presented by MRS and the American Chemical Society
Presented by MRS and the American Ceramic Society
October 5, 12, 19 and 26, 2021 Presented by MRS and Society for Biomaterials
Presented by MRS and the American Chemical Society
Presented by MRS Communications and Nature Communications
Stay In Touch!
Stay In Touch!
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
Institute of Functional Materials for Sustainability
Intel Corporation
Brown University
King Abdullah University of Science and Technology
Pacific Northwest National Laboratory
Rice University
Iframe with Caption in a 50-50 Container
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
"Full - card" template (with no Action Link set) on GRID 6+6 layout
Card Heading
Card description
For seminal contributions leading to the understanding of the morphology of organic thin films and its implications on organic electronic device performance