CSS Playground
Herein lie things that may break.
Above this block is page-wide CSS for removing header image and page title, as well as making page full width. Please note this makes the space between sections minimal, as seen throughout this page.
Standard Heading Dupes
Paragraphs styled using in-line css to match various heading levels.
Heading 1 but not
Heading 2 but not
Heading 3 but not
Heading 4 but not
Intro Text Dupe
Placing this here so the CSS properties can be referenced and copied easily. It's not a perfect copy, but very very similar.
Intro Text Dupe
Actual Intro Text
Standard Mosaic Text Tile Dupes
Text blocks styled to look like mosaic tiles using in-line and stylesheet CSS. Useful for mimicking mosaic tiles for calls to action or heading formatting. These have the full width fill function of a mosaic tile, but will not expand vertically the same way.
H2 version for styling pages
This entire tile is clickable.
Technically Intro Text
Description Text
Link ➡
Formatting on final one still in adjustment.
Heading modifications
CSS in same block. Adjust the class name in the CSS and HTML in order to not conflict with other page elements. Set to ".block" to affect all on the page.
Heading 1 Test
Heading 2 Test
Heading 3 Test
Small CTA Button
CSS in same block. You will need to use style="text-decoration: none; color: #ffffff;" in the <a> tag. If a background color is already being used in the space, add background-color: #005239; to the style tag.
Color Bar
Creates a class that adds a small line of a specified color using border element.
Hitting enter after the paragraph/div may just add more paragraphs/divs with the class applied. This requires the user to step in and adjust the CSS to remove the class from the new paragraphs.
Also note that the line is technically a "top border" so it will stay closer to the preceding paragraph/text than the following.
This is a test of section mods.
.layout:nth-child(x) is absolute to page, not relative to proximity to code. This means that reordering elements on the page may cause a cascade of updating section numbers.
However, even with the code controlling the background of this section inside the section, it works. This means that code for each section could be kept in proximity to its target, rather than trying to blindly connect a long page of CSS to the corresponding sections.
Also of note, this block was given 20px padding to ensure no text ran under neighboring image.
Column Border Test
This is a way to add a border between columns of a section. CSS in section above this one. On mobile, the line disappears. The layout section number will need to be set to whatever section number you wish to edit. Different sections can be modified by changing "region-first" to whichever region you desire. 12px padding mimics padding of column on opposite side of border line.
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.
Full Width Image test
CSS is inside this block for the following image. Image shows full size on backend. Please note that the image will "crunch" right up against preceding and following blocks (like a strange mosaic tile). Check out how much of image is shown on desktop vs mobile; much more is visible in the latter case.
Background image testing
This is to test background image behavior in a section. Background could also be a pattern repeated for texture.
Please be aware that background images also work on a block by block basis, if you wish to have an image only cover the space of one block. This removes the need to use section number tethered CSS and could be turned to a reusable class.
- Image will continue across entire width of section, regardless of columns.
- Image in background of previous section cuts off when new section starts. This may look strange on some sites. For example, because there is much white in the background image, the cutoff by another white background looks like the image just abruptly stops, rather than being covered up by another color.
- To fade an image, use a % background gradient matching the background color of the section (usually white).
- Please double check how your background looks on mobile!
"Hide on Mobile" Testing
Mosaic tile sections used solely for decorative purpose can take up a considerable amount of space on mobile when stacked. This is a test of the ability to hide one section that contains such images on mobile devices. If you are viewing this on mobile and do not see a bunch of images between this and Block Quote Testing, then you know it is working!
Please be aware that this code is section number dependent, so it will need to be adjusted if you move the section later. The code could likely be changed to create a section that only shows on mobile as well, by swapping "max-width" to "min-width" (may need to increase number to 1001px in that situation).
Block Quote Testing
Block quote styling could be useful for podcast episodes, Spirit articles, and more.
This is a quote box style we've used before, but I've updated the graphic to grey, rather than the old brand tan.
The image is 100% the brand grey with a 50% opacity filter placed over it in CSS. Text styling is, of course, also adjustable as needed.
Test of floating a quote to the side of a text area. This could be adjusted in color or size as needed in the CSS, which is contained within this block.
Lorem ipsum odor amet, consectetuer adipiscing elit.
Lorem ipsum odor amet, consectetuer adipiscing elit. Maecenas rhoncus aliquam ut augue sagittis aliquet. Sociosqu nec nunc sapien faucibus id proin nibh nam donec. Vel cursus sapien est praesent sit. Tellus platea venenatis consequat placerat consectetur lorem. Efficitur curae bibendum turpis suscipit, taciti porta posuere venenatis. Fringilla primis suspendisse condimentum eleifend amet nunc ex nam.
Lorem ipsum odor amet, consectetuer adipiscing elit.
Lorem ipsum odor amet, consectetuer adipiscing elit. Maecenas rhoncus aliquam ut augue sagittis aliquet. Sociosqu nec nunc sapien faucibus id proin nibh nam donec. Vel cursus sapien est praesent sit. Tellus platea venenatis consequat placerat consectetur lorem. Efficitur curae bibendum turpis suscipit, taciti porta posuere venenatis. Fringilla primis suspendisse condimentum eleifend amet nunc ex nam.
Stats List Format
This is a format intended for use with statistics or fast facts (like a version of mosaic tiles). The difference is this is technically a list, if that provides more options. Mobile settings included. CSS in this block; formatted list in next. Please note that the preview is more easily editable if the CSS and HTML are in the same block.
-
#1 in VA
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Source of info
-
#1 in VA
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Source of info
-
#1 in VA
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Source of info
Info Cards
Custom class is within this block. These cards will float information in a way that is visually eye catching. Cards fit well in a 25% column, meaning it is easy to do a 4 column section with them.
Mason Autonomy and Robotics Center (MARC)
Autonomy, Robotics, and Responsible AI
Industry executives, campus leaders, faculty, donors and alumni attended the official opening of the College of Engineering and Computing’s new center.
Article Card
A full column width version of the info card. This card could use more testing, as different situations will cause different levels of text/image content. Please be sure to test on mobile as well when using.
Mason Autonomy and Robotics Center (MARC)
Autonomy, Robotics, and Responsible AI
Industry executives, campus leaders, faculty, donors and alumni attended the official opening of the College of Engineering and Computing’s new center.
This is roughly how the Article Card to the left looks on mobile preview.
Button Grid
This is a way to format button groups by rows in spaces that normal SiteMasonry buttons will not work. CSS is in this block; grid HTML is in following block.
Please be aware that you must include and set the width of the button for every button individually. This is because the CSS cannot account for "I want two buttons in a row" or "I want three buttons in a row" in the current setup. It is highly suggested you set the "item-width" variable for slightly smaller than the percent you would want, to account for some window sizing oddities. (i.e. If you want a two button row with each button taking up half the space, it is advised you set each button's width to 45%.)
On mobile, all buttons stack by row.
Button Grid Title
Stats Block
In development. This is going to need extensive testing to ensure it is good in various width spaces.
Intent of this block is:
- to mimic a style found in many infographics and
- to test functionality of multiple columns under a single column section.
square feet
million
stories
Image Overlays
These are currently a work in progress!
