2 base Base

Source: 00-config/_variables.scss, line 9

2.1 base.root Root

The HTML root component contains the doctype, HTML element, HEAD element and BODY element. It also contains the CSS for those elements and the * universal selector.

Source: 01-base/root/_root.scss, line 1

2.2 base.type Typography

Headings, paragraphs, blockquotes, lists, and more have some global resets.

Source: 01-base/text/_text.scss, line 1

2.2.1 base.type.font Font

The standard font Open social uses is Montserrat. We have included the font files with our theme. We bundle our theme with 3 different font weights you can use: 300, 500 and 700

Setting a custom font

Option 1

Use the social_font module to upload custom fonts and select you new font in the theme settings.

Option 2

Upload your font to the assets folder of your theme. Update the base component text/fonts and update the $font-family-webfont variable. Don't forget to compile the CSS again.

Source: 01-base/text/_fonts.scss, line 1

2.2.2 base.type.headings Headings

Toggle example guides Toggle HTML markup

Example

A Heading Level 1 (h1) with enough text to wrap to another 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.

Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another 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.

Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another 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.

Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another 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.

Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another 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.

Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another 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.

Markup

A Heading Level 1 (h1) with enough text to wrap to another 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.

Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another 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.

Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another 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.

Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another 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.

Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another 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.

Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another 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.

Source: 01-base/headings/_headings.scss, line 1

2.2.4 base.type.text Text elements

Toggle example guides Toggle HTML markup

The elements in this section give semantics to inline text.

Example

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold.

The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic

An abbreviation of the word attribute is attr. And HTML is an acroynm.

Mlle Gwendoline wrote the equation f(x, n) = log4xn.

Markup

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold.

The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic

An abbreviation of the word attribute is attr. And HTML is an acroynm.

Mlle Gwendoline wrote the equation f(x, n) = log4xn.

Source: 01-base/text/_text.scss, line 9

2.2.5 base.type.address Addresses

Toggle example guides Toggle HTML markup

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Example
Open Social HQ
Singel 542
1017 AZ Amsterdam
P: (123) 456-7890
Full Name
first.last@example.com
Markup
Open Social HQ
Singel 542
1017 AZ Amsterdam
P: (123) 456-7890
Full Name
first.last@example.com
Source: 01-base/text/_text.scss, line 19

2.2.6 base.type.blockquotes Blockquotes

Toggle example guides Toggle HTML markup

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Markup

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Source: 01-base/text/_text.scss, line 30

2.2.7 base.type.h-rule Horizontal rule

Toggle example guides Toggle HTML markup

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Markup

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Source: 01-base/text/_text.scss, line 41

2.3 base.code Code

Toggle example guides Toggle HTML markup

The <code> element represents a fragment of computer code.
The <var> element represents a variable.
The <samp> element represents (sample) output from a program or computing system.
The <kbd> element represents user input (typically keyboard input.)

Example

The code element represents a fragment of computer code.

There are y = mx + b flavors of ice cream to be available for purchase!

This text is meant to be treated as sample output from a computer program.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Markup

The code element represents a fragment of computer code.

There are y = mx + b flavors of ice cream to be available for purchase!

This text is meant to be treated as sample output from a computer program.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Source: 01-base/code/_code.scss, line 1

2.4 base.lists Lists

Source: 01-base/lists/_lists.scss, line 1

2.4.1 base.lists.ul Unordered list

Toggle example guides Toggle HTML markup

The <ul> element is a list of items in which the order does not explicitly matter.

Example
  • Sit Ullamcorper Ultricies
  • Tortor
  • Mollis
  • Dolor
    • Cursus
    • Cras
    • Pellentesque
    • Egestas Sem
  • Cursus Malesuada
  • Fermentum Tellus
Markup
  • Sit Ullamcorper Ultricies
  • Tortor
  • Mollis
  • Dolor
    • Cursus
    • Cras
    • Pellentesque
    • Egestas Sem
  • Cursus Malesuada
  • Fermentum Tellus
Source: 01-base/lists/_lists.scss, line 7

2.4.2 base.lists.ol Ordered list

Toggle example guides Toggle HTML markup

The <ol> element is a list of items in which the order does explicitly matter.

Example
  1. Sit Ullamcorper Ultricies
  2. Tortor
  3. Mollis
  4. Dolor
    1. Cursus
    2. Cras
    3. Pellentesque
    4. Egestas Sem
  5. Cursus Malesuada
  6. Fermentum Tellus
Markup
  1. Sit Ullamcorper Ultricies
  2. Tortor
  3. Mollis
  4. Dolor
    1. Cursus
    2. Cras
    3. Pellentesque
    4. Egestas Sem
  5. Cursus Malesuada
  6. Fermentum Tellus
Source: 01-base/lists/_lists.scss, line 16

2.4.3 base.lists.dl Description list

Toggle example guides Toggle HTML markup

The <dl> element is a list of terms with their associated descriptions.

Example
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Markup
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Source: 01-base/lists/_lists.scss, line 27

2.5 base.tables Tables

Toggle example guides Toggle HTML markup

The <table> element displays tabular data in rows, columns, and cells.

Example
Optional table caption.
Member Organisation Role Action
Chris Hall Receptionist at Bastion Hotels Member
Michelle Williams Community manager at Open Social Group organiser
Jim Oyster Plumber at Forgottoflush Member
Markup
Optional table caption.
Member Organisation Role Action
Chris Hall Receptionist at Bastion Hotels Member
Michelle Williams Community manager at Open Social Group organiser
Jim Oyster Plumber at Forgottoflush Member
Source: 01-base/tables/_tables.scss, line 3

2.6 base.embedded Embedded content

Source: 01-base/embedded/_embedded.scss, line 1

2.6.1 base.embedded.img Images

Toggle example guides Toggle HTML markup

An <img> element represents an image. We are using the following image styles in Drupal. You can use devtools to inspect images.

Name Sizes Effects Example
Social extra extra large 1200 x 423 Scale & crop Hero background
Social extra large 220 x 220 Scale & crop Event teaser
Social large 128 x 128 Scale & crop Profile image
Social medium 44 x 44 Scale & crop Stream avatar
Social small 24 x 24 Scale & crop Newest members listd
Example

An image that is inline with other text.

An image inside a figure.
Markup

An image that is inline with other text.

An image inside a figure.
Source: 01-base/embedded/_embedded.scss, line 7

2.6.2 base.embedded.svg Scalable vector

Toggle example guides Toggle HTML markup

A <svg> element represents an image encoded as a Scalable Vector Graphic.

Example

A svg image that is inline with other text.

A svg inside a figure.
Markup

A svg image that is inline with other text.

A svg inside a figure.
Source: 01-base/embedded/_embedded.scss, line 27