Modifier Classes
- Alignment
Applies
!important
declarationText alignment
The following classes change the
text-align
of an element.Class Description .align--left
sets text-align
toleft
.align--right
sets text-align
toright
.align--center
sets text-align
tocenter
Vertical alignment
The following classes adjust vertical centering of element contents.
For elements displaying as
inline-block
ortable-cell
, thevertical-align
property is used.For flex children, these classes set the
align-self
property to a value that best matches thevertical-align
value.Class Description .valign--baseline
vertically centers element to baseline .valign--bottom
vertically centers element to bottom .valign--middle
vertically centers element to middle .valign--top
vertically centers element to top Aligning Children
The following classes adjust the alignment of child elements using flexbox. The selected element will be set to
display: flex
in acolumn
direction.Class Description .valignChildren--bottom
vertically centers children to the bottom of the parent element .valignChildren--center
vertically centers children within the parent element -
- Aspect ratio helper
Maintains a given aspect ratio for flexible media. Apply to elements with background images.
Class Description .keepAspect
maintains 1:1 aspect ratio when resized .keepAspect--16-9
maintains 16:9 aspect ratio when resized .keepAspect--2-1
maintains 2:1 aspect ratio when resized .keepAspect--2-3
maintains 2:3 aspect ratio when resized .keepAspect--4-3
maintains 4:3 aspect ratio when resized -
- Background
Background modifiers.
-
- Image Fill
Sets background properties that center background image, set size to 'cover', and overflow hidden.
Extends
%imgFill
.EXAMPLE TK
- Image Fill
- Borders
Sets border properties on element
Class Description .border--top
sets a standard top border on the element .border--right
sets a standard right border on the element .border--bottom
sets a standard bottom border on the element .border--left
sets a standard left border on the element .border--none
removes all borders from element .bordered
sets a standard top border AND top padding .focus--none
removes user agent focus style -
- Anchors & Buttons
Applies button-like pointer styles, text-decoration, and user-select.
I'm just an anchor, displayed block I behave more like a button (hover over me; try to select this text)<a class="chunk display--block">I'm just an anchor, displayed block</a> <a class="buttonPersonality chunk display--block">I behave more like a button (hover over me; try to select this text)</a>
-
- Display
Modifies display property of element
Class Description .display--none
sets display
tonone
.display--block
sets display
toblock
.display--flex
sets display
toflex
.display--inline
sets display
toinline
.display--inlineBlock
sets display
toinline-block
.display--inlineFlex
sets display
toinline-flex
.display--grid
sets display
togrid
-
- Flex Parent
Sets
display: flex
rules for selected element as well as orientation rules forrow
orcolumn
.Class Description .flexParent--row
sets display
toflex
with row orientation for children.flexParent--column
sets display
toflex
with column orientation for children
- Flex Parent
- Float
Left and right
float
Class Description .float--left
floats selected element left .float--right
floats selected element right -
- Float
Float clearing.
Class Description .clearfix
clears float
property of children
- Float
- Flush
Applies
!important
declarationThe following classes "flush" an element, removing padding and margin for a given side variant.
Class Description .flush--all
removes padding
andmargin
from all sides of an element.flush--top
removes padding
andmargin
from the top side of an element.flush--right
removes padding
andmargin
from the right side of an element.flush--bottom
removes padding
andmargin
from the bottom side of an element.flush--left
removes padding
andmargin
from the left side of an element-
- Javascript-conditional modifiers
Conditionally changes the display property of an element based javascript availability.
Assumes a class of
hasJS
is added to thebody
tag with javascript on page loadClass Description hasJS_display--block
Sets display
property toblock
if user has JShasJS_display--inline
Sets display
property toinline
if user has JShasJS_display--inlineBlock
Sets display
property toinline-block
if user has JShasJS_display--none
Sets display
property tonone
if user has JS-
- List
Standard divided/spaced list; similar to an iOS table view.
Bottom spacing is provided with
chunk
.-
Just a list item
-
Just a list item
-
Just a list item
<ul class="list"> <li class="list-item"> <h2 class="chunk">Just a list item</h2> </li> <li class="list-item"> <h2 class="chunk">Just a list item</h2> </li> <li class="list-item"> <h2 class="chunk">Just a list item</h2> </li> </ul>
-
-
- List item variants
A class of
.list-item
is required on list items. The following classes are optional variants:Class Description .list-item--active
adds a background color to denote selected/active state (at medium & up only) .list-item--gutters
adds left and right padding to list item Touchable list items with selection
The
list-item
class can be applied to anchors instead for a touchable list<div class="chunk"> <h2>Touchable list items with selection</h2> <p>The <code>list-item</code> class can be applied to anchors instead for a touchable list</p> </div> <ul class="list"> <li> <a href="#" class="list-item list-item--gutters"> <div class="chunk"> <h3 class="text--bold">Member Name</h3> <p class="text--caption">Something blah blah</p> </div> </a> </li> <li> <a href="#" class="list-item list-item--gutters list-item--active"> <div class="chunk"> <h3 class="text--bold">Member Name</h3> <p class="text--caption">Something blah blah</p> </div> </a> </li> <li> <a href="#" class="list-item list-item--gutters"> <div class="chunk"> <h3 class="text--bold">Member Name</h3> <p class="text--caption">Something blah blah</p> </div> </a> </li> </ul>
- List item variants
- Match media size
Match media height
The following classes increasing the
height
of an element to match one of our specified media sizes.Class Description .matchMediaSize--height--xs
sets height to $media-xs .matchMediaSize--height--s
sets height to $media-s .matchMediaSize--height--m
sets height to $media-m .matchMediaSize--height--l
sets height to $media-l -
- Media-conditional modifiers
Media-conditional modifiers allow us to apply a modification at a specific breakpoint.
Uses atMediaUp
Example
This text inherits the default left alignment by default, but at
large
viewports and up, the text should center<p class="atLarge_align--center"> This text inherits the default left alignment by default, but at `large` viewports and up, the text should center </p>
Supported modifications
Using this signature:
.at[Breakpoint]_[property]--[variant]
Breakpoints Property Variants medium
,large
align
center
,right
,left
medium
,large
display
none
,block
,flex
,grid
inline
,inlineBlock
,inlineFlex
medium
,large
padding
top
,right
,bottom
,left
,none
medium
,large
margin
center
medium
,large
border
top
,none
medium
,large
visibility
a11yHide
,a11yShow
medium
,large
width
auto
,full
-
- Media Sizing
Classes for applying dimensions to an element.
Class Description .media--xs
Sets width
to$media-xs
and height toauto
.media--s
Sets width
to$media-s
and height toauto
.media--m
Sets width
to$media-m
and height toauto
.media--l
Sets width
to$media-l
and height toauto
.media--xl
Sets width
to$media-xl
and height toauto
.media--xxl
Sets width
to$media-xxl
and height toauto
-
- Margin/Padding
Applies the standard unit of space as margin or padding to an element.
Margin
Class Description .margin--top
Adds top $space
margin to element.margin--right
Adds right $space
margin to element.margin--bottom
Adds bottom $space
margin to element.margin--left
Adds left $space
margin to element.margin--halfTop
Adds top $space-half
margin to element.margin--halfRight
Adds right $space-half
margin to element.margin--halfBottom
Adds bottom $space-half
margin to element.margin--halfLeft
Adds left $space-half
margin to element.margin--all
Adds margin to all sides of element .margin--none
Sets margin
to0
.margin--center
Sets left and right margin to auto
Padding
Class Description .padding--top
Adds top $space
padding to element.padding--right
Adds right $space
padding to element.padding--bottom
Adds bottom $space
padding to element.padding--left
Adds left $space
padding to element.padding--halfTop
Adds top $pace-half
padding to element.padding--halfRight
Adds right $space-half
padding to element.padding--halfBottom
Adds bottom $space-half
padding to element.padding--halfLeft
Adds left $space-half
padding to element.padding--all
Adds padding to all sides of element .padding--none
Sets padding
to0
-
- Sticky
Sets the position property of element to
sticky
, and uses modifier classes for picking a which side of the viewport to stick toClass Description .sticky
sets position
tosticky
.sticky--top
sets top
to0
, causing element to "stick" to the top of the viewport.sticky--bottom
sets bottom
to0
, causing element to "stick" to the bottom of the viewport-
- Text Modifiers
Modifiers for text.
-
- Hiding Text
To hide just the text node of an element, use the
text--hide
modifier.This is useful for links that only contain an SVG icon (use descriptive text for screen readers).
(this class will not work on
inline
elements)<a class="display--block text--hide" href="#"> You can see the kitten, but you can't see this text. <img src="https://placekitten.com/g/32/32" /> </a>
Class Description .text--hide
Visually hides text; removes text from document flow - Text decoration/transform
Basic text decoration and transform
Class Description .text--strikethrough
strikethrough/strikeout/line-through .text--uppercase
uppercase text (limited to English) - No Hyphens
Don't allow hyphens on line breaks
Class Description .text--noHyphens
Don't allow hyphens on line breaks - Nice Hyphenation
Enables breaking all words and auto-hyphenation.
Class Description .text--wrapNice
Auto hyphenation and nice wrapping for running text - Type wrap/whitespace
Sets type wrapping, witespace, and overflow properties on element
Class Description .wrap--singleLine
forces text to a single line (nowrap) .wrap--singleLine--truncate
forces text to a single line (nowrap) and truncates with … .matchLineHeight
adds a small amount of top and bottom margin to a non-text element to match line height of nearby text
- Hiding Text
- Thumbnails
Sets background cover and position for photo thumbnails.
<div class="thumb media--l" style="background-image: url(http://photos4.meetupstatic.com/photos/member/d/0/2/c/member_156833292.jpeg);"></div>
-
- Visibility
Modifies
visibility
property of an element or in the case ofa11y
classes, visually hides an element that will not be ignored by screen readers.Class Description .visibility--a11yHide
takes element out of document flow and hides it (screen readers will NOT ignore the element) .visibility--a11yShow
reveals a a11y hidden element for sighted users -
- Width
Sets element width in percentage.
Includes
!important
directive in order to override input attribute selectors.span--[width%]
100% width
80% width
75% width
60% width
50% width
30% width
25% width
<p class="span--100" style="background: pink;">100% width</p> <p class="span--80" style="background: pink;">80% width</p> <p class="span--75" style="background: pink;">75% width</p> <p class="span--60" style="background: pink;">60% width</p> <p class="span--50" style="background: pink;">50% width</p> <p class="span--30" style="background: pink;">30% width</p> <p class="span--25" style="background: pink;">25% width</p>
-
- Animation
Applies keyframes animation to element
Class Description .animate--bounceInSubtle
Applies bounce-in keyframes animation (plays once) .animate--spin
Applies 360deg rotation keyframes (infinite) -
Layout
- Row
DEPRECATED
Please use the
Flex
component in meetup-web-components instead.
Arranges content in rows using
display: flex
.The
.row
class is applied to a wrapping element.Direct children of
.row
are flex children, and require a class of.row-item
with an optional.row-item--shrink
for a flex-shrink item.The flex children in flex row do not have a
flex-basis
set; a basis is not required for most common layout tasks.Includes
table-cell
fallback for IE8.Examples:
Item 1Item 2Item 3Item 4<div class="row"> <div class="_DOC-SHADE row-item">Item 1</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div> <div class="_DOC-SHADE row-item">Item 4</div> </div>
Item 1Item 2Item 3<div class="row"> <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div> <div class="_DOC-SHADE row-item">Item 2</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div> </div>
Item 1Item 2Item 3<div class="row row--flexEnd"> <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div> </div>
Item 1Item 2Item 3Item 4<div class="row row--spaceBetween row--reverse"> <div class="_DOC-SHADE row-item row-item--shrink">Item 1</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 2</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 3</div> <div class="_DOC-SHADE row-item row-item--shrink">Item 4</div> </div>
-
- Row variants
DEPRECATED
Please use the
Flex
component in meetup-web-components instead.
A class of
.row
is required on the flex row parent. The following classes are optional variants:Class Description .row--noGutters
removes padding from all .row-item
children.row--wrap
allows row wrapping (useful for collapsing rows in smaller viewports) .row--reverse
reverses row order Content justification variants are also available (see also: css tricks flexbox demo)
Class Description .row--flexEnd
justifies content to flex-end
.row--center
justifies content to center
.row--spaceBetween
justifies content to spaceBetween
.row--spaceAround
justifies content to spaceAround
- Row Item variants
DEPRECATED
Please use the
Flex
component in meetup-web-components instead.
A class of
.row-item
is required on row items. The following classes are optional variants:Class Description .row-item--shrink
Item shrinks to fit content
- Row variants
Text Styles
- Body/primary
This is default body text, inheritied from type styles applied to <body>
<p>This is default body text, inheritied from type styles applied to <body></p>
-
- Inverted
Apply the
inverted
class to a container with a dark background color or photo to flip all text elements to inveted colors.This is default body text, inheritied from type styles applied to <body>
<div style="background: #353E48;" class="inverted"> <p>This is default body text, inheritied from type styles applied to <body></p> </div>
-
- Hint
This is hint text
<p class="text--hint">This is hint text</p>
-
- Secondary
Secondary text is secondary
<p class="text--secondary">Secondary text is secondary</p>
-
- Tertiary
Tertiary text is tertiary
<p class="text--tertiary">Tertiary text is tertiary</p>
-
- Bold
Bold text is bold
<p class="text--bold">Bold text is bold</p>
-
- Normal
Normal text class is a normal font-weight.
This heading is usually bold.
<h2 class="text--normal">Normal text class is a normal font-weight.</h2> <h2 class="text--normal">This heading is usually bold.</h2>
-
- Small
Small text class is small
Default styling of "small" tag<p class="text--small">Small text class is small</p> <small>Default styling of "small" tag</small>
-
- Tiny
Tiny text class is VERY small and should be used sparingly and probably never in conjunction with
text--hint
<p class="text--tiny">Tiny text class is VERY small and should be used sparingly and probably never in conjunction with `text--hint`</p>
-
- Big
Big text class is big
Default styling of "big" tag<p class="text--big">Big text class is big</p> <big>Default styling of "big" tag</big>
-
- Monospaced
The
code
andpre
elements use a monospaced font by default. To apply monospaced type rules to any other element, usetext--mono
.Is this code? What is this?
This is code
We can safely assume a pre tag on Meetup is also code
<p class="text--mono">Is this code? What is this?</p> <code>This is code</code> <pre>We can safely assume a pre tag on Meetup is also code</pre>
-
- Caption
<p class="text--caption">I'm captioning all the things</p>
-
- Error
I'm erroring all the things
Attention!
<p class="text--error">I'm erroring all the things</p> <p class="text--attention">Attention!</p>
-
- Colored text
Applies standard text colors. The variant is the color name:
text--[color]
. All supported variants are listed below.These classes set both the
color
andfill
properties in order to also set the color of icons inline with text.This style is set as
!important
- Normal heavy text
- Colorful heavy text
- Colorful heavy text
- Colorful heavy text
- Colorful heavy text
- Colorful heavy text
- Colorful heavy text
- Colorful heavy text
<section class="stripe stripe--inverted inverted"> <div class="bounds"> <ul class="inlineblockList inlineblockList--bulleted chunk text--heavy"> <li>Normal heavy text</li> <li class="text--red">Colorful heavy text</li> <li class="text--dark-red">Colorful heavy text</li> <li class="text--pink">Colorful heavy text</li> <li class="text--teal">Colorful heavy text</li> <li class="text--blue">Colorful heavy text</li> <li class="text--yellow">Colorful heavy text</li> <li class="text--orange">Colorful heavy text</li> </ul> </div> </section>
-
- Middot text
I have a right middot
I have a left middot
<p class="text--middotRight">I have a right middot</p> <p class="text--middotLeft">I have a left middot</p>
-
- Running text
By default, paragraphs and headings are not styled with any bottom spacing. Links are not blue by default, as the most common case on Meetup will be block-level anchors with large touch targets.
However, there will be instaces where you want the blue links and properly spaced paragraphs of running text (ie. event descriptions).
The robot is partially dressed in waterproof surgical garb.
"Bruce Springsteen" is a terrible name for a cat.
The robot is partially dressed in waterproof surgical garb.
"Bruce Springsteen" is a terrible name for a cat.
<p>The robot is partially dressed in waterproof surgical garb.</p> <p>"Bruce Springsteen" is a terrible name for a <a href="#">cat</a>.</p> <hr style="margin: 8px;" /> <!-- lol, hr --> <div class="runningText"> <p>The robot is partially dressed in waterproof surgical garb.</p> <p>"Bruce Springsteen" is a terrible name for a <a href="#">cat</a>.</p> </div>
-
- Link color
You can always force an anchor to apply a linky blue color by applying the
.link
class.Let's force this link to be red-underlined.
<p>Let's force this <a class="link" href="#">link</a> to be red-underlined.</p>
-
- Bulleted lists
<ul>
and<ol>
element list styles are reset by default.- Eggs
- More Eggs
<ul> <li>Eggs</li> <li>More Eggs</li> </ul>
List style bullets are applied when list elements are inside a
.runningText
container.Shopping list
- Eggs
- More Eggs
<div class="bounds"> <h3 class="text--big">Shopping list</h3> <div class="runningText"> <ul> <li>Eggs</li> <li>More Eggs</li> </ul> </div> </div>
You may also use the
.bullets
class to apply numbers/bullets to a list.Shopping list
- Eggs
- More Eggs
<div class="bounds"> <h3 class="text--big">Shopping list</h3> <ul class="bullets"> <li>Eggs</li> <li>More Eggs</li> </ul> </div>
-
- Debug text
Sometimes you just need to dump some text into a document to debug.
By default, the
debug
element is hidden. Apply theenableDebug
class to a parent element to displaydebug
elements.Setting the
enableDebug
class onbody
for dev only is recommended.Invisible debug
Visible debug [ ChapterProto => chapterId=530569 parentChapterId=0 transitionalVenueId=0 relocatedZip= name=Foreign Androids Feel Frustrated
<p class="debug">Invisible debug</p> <div class="enableDebug"> <p class="debug"> Visible debug [ ChapterProto => chapterId=530569 parentChapterId=0 transitionalVenueId=0 relocatedZip= name=Foreign Androids Feel Frustrated </p> </div>
-
Forms
- Basic Inputs
- The
chunk
androw
classs used below are for documentation purposes only and are not provided byswarm-sassutils
. For layout components, see meetup-web-componentsText inputs
<div class="chunk"> <label for="test-textinput" class="required">I'm a label</label> <input id="test-textinput" type="text" value="Text input with value" /> </div> <div class="chunk"> <label for="test-textinput2">Just another label</label> <input id="test-textinput2" type="text" placeholder="Text input with placeholder" /> </div> <div class="chunk"> <label for="test-textarea">Here's an area for your text</label> <textarea id="test-textarea"></textarea> </div> <div class="chunk"> <label for="test-select">What is this?</label> <select id="text-select"> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="Four">Four</option> </select> </div> <div class="row"> <div class="row-item chunk"> <label for="split1">Favorite number</label> <input id="split0" type="number" /> </div> <div class="row-item chunk"> <label for="split1">Unicorn name</label> <input id="split1" type="text" placeholder="ie. Fluffy, Resplendent" /> </div> <div class="row-item chunk"> <label class="required" for="split2">Unicorn color</label> <select id="split2"> <option value="clear">Transparent</option> <option value="green">Toasted clove saffron</option> <option value="brown">Midnight brown</option> <option value="black">Seabreeze black</option> </select> </div> </div>
-
- Checkboxes
A label variant class of
label--minor
is used for side-by-side inputs and labels.For radios and checkboxes, we put the
input
element inside thelabel
element.A class of
checkbox
is required on checkbox input elements.<label for="check1" class="label--minor chunk"> <input id="check1" class="checkbox" value="green" type="checkbox" /> Green </label> <label for="check2" class="label--minor chunk"> <input id="check2" class="checkbox" value="blue" type="checkbox" /> Blue </label> <label for="check3" class="label--minor chunk"> <input id="check3" class="checkbox" value="blue" type="checkbox" checked /> Already checked </label>
-
Headings
- Headings
Heading defaults.
-
- Heading tags
All heading tags are reset to use
text--heavy
styles by default.Apply a text class to apply additional heading styles; for example,
text--display1
.Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
-
- Display text
Display text is useful for styling headings.
Use the semantically correct heading level tag, then apply a display text class to visually style the tag as a heading.
Display text is for headings
<h2 class="text--display1">Display text is for headings</h2>
-
- Title text
Title text is used to title entire views or for labeling sections of a view.
Page title is for labeling views
Section title is for labeling sections of views
<h2 class="text--pageTitle">Page title is for labeling views</h2> <h2 class="text--sectionTitle">Section title is for labeling sections of views</h2>
-
- Label header
Label for subsection
Secondary label for subsection
<h3 class="text--label">Label for subsection</h3> <h3 class="text--labelSecondary">Secondary label for subsection</h3>
-
Tables
- Default table styles
State Number of escalators State bird New York 7,674 Cardinal Wyoming 2 Cardinal Oregon 400 Cardinal Florida n/a Cardinal <table> <thead> <tr> <th>State</th> <th>Number of escalators</th> <th>State bird</th> </tr> </thead> <tbody> <tr> <th>New York</th> <td>7,674</td> <td>Cardinal</td> </tr> <tr> <th>Wyoming</th> <td>2</td> <td>Cardinal</td> </tr> <tr> <th>Oregon</th> <td>400</td> <td>Cardinal</td> </tr> <tr> <th>Florida</th> <td>n/a</td> <td>Cardinal</td> </tr> </tbody> </table>
-
- Bordered table
Apply the
borderedTable
class to apply borders to table cells.State Number of escalators State bird New York 7,674 Cardinal Wyoming 2 Cardinal Oregon 400 Cardinal Florida n/a Cardinal <table class="borderedTable"> <thead> <tr> <th>State</th> <th>Number of escalators</th> <th>State bird</th> </tr> </thead> <tbody> <tr> <th>New York</th> <td>7,674</td> <td>Cardinal</td> </tr> <tr> <th>Wyoming</th> <td>2</td> <td>Cardinal</td> </tr> <tr> <th>Oregon</th> <td>400</td> <td>Cardinal</td> </tr> <tr> <th>Florida</th> <td>n/a</td> <td>Cardinal</td> </tr> </tbody> </table>
-
- Reset table
State Number of escalators State bird New York 7,674 Cardinal Wyoming 2 Cardinal Oregon 400 Cardinal Florida n/a Cardinal <table class="resetTable"> <thead> <tr> <th>State</th> <th>Number of escalators</th> <th>State bird</th> </tr> </thead> <tbody> <tr> <th>New York</th> <td>7,674</td> <td>Cardinal</td> </tr> <tr> <th>Wyoming</th> <td>2</td> <td>Cardinal</td> </tr> <tr> <th>Oregon</th> <td>400</td> <td>Cardinal</td> </tr> <tr> <th>Florida</th> <td>n/a</td> <td>Cardinal</td> </tr> </tbody> </table>
-
- Striped table
Apply the
stripedTable
class to add a background stripe to every other row of the table.State Number of escalators State bird New York 7,674 Cardinal Wyoming 2 Cardinal Oregon 400 Cardinal Florida n/a Cardinal <table class="stripedTable"> <thead> <tr> <th>State</th> <th>Number of escalators</th> <th>State bird</th> </tr> </thead> <tbody> <tr> <th>New York</th> <td>7,674</td> <td>Cardinal</td> </tr> <tr> <th>Wyoming</th> <td>2</td> <td>Cardinal</td> </tr> <tr> <th>Oregon</th> <td>400</td> <td>Cardinal</td> </tr> <tr> <th>Florida</th> <td>n/a</td> <td>Cardinal</td> </tr> </tbody> </table>
-