1 sass Sass

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

1.1 sass.settings Initialization partial

To make it easier to use all variables and mixins in any Sass file in this project, each .scss file has a @import 'settings'; declaration. The _settings.scss file is in charge of importing all the other partials needed for the project.

Source: _settings.scss, line 5

1.2 sass.colors Colors

Brand colors

You can use your own brand colors for your version of this application. The look and feel of our theme relies on using a handful of specific colors that help convey meaning and purpose.

Primary color

When using a primary color in your palette, this color should be the most widely used across all screens and components.

Variable name: $brand-primary

Secondary color

Palettes with a secondary color may use this color to indicate a related action or information.

Variable name: $brand-secondary

Accent color

The accent should be used for promoted actions only.

Variable name: $brand-accent


Colors are defined as variables. You also use some predefined classes such as

  • .bg-primary
  • .text-primary

State colors

For states in forms, messages and other feedback we use state colors to indicate whether user actions were performed successfully or failed for example.




Source: 00-config/variables/_colors.scss, line 1

1.3 sass.breakpoints Media queries

Our breakpoints are not based on actual devices but device ranges. We do not know which devices might come on the market, so we don't want to depend on this metrics. Also we have named our breakpoints declarative, so you can see if it is a min of max value, based on the mixin name.

@mixin for-phone-only : max-width: 599px
@mixin for-tablet-portrait-up : min-width: 600px
@mixin for-tablet-landscape-down : max-width: 899px
@mixin for-tablet-landscape-up : min-width: 900px
@mixin for-desktop-up : min-width: 1200px
@mixin for-big-desktop-up : min-width: 1800px

@mixin for-retina-2 : min-device-pixel-ratio: 2
@mixin for-retina-3 : min-device-pixel-ratio: 3

Source: 00-config/mixins/_media-queries.scss, line 1

1.4 sass.elevation Elevation

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is. Read more information about Material design - Elevation and shadows.

We distinguish 6 layers of elevation in Open Social.

0 - Canvas layer

This is our canvas / background. All other layers are compared to this layer.
@mixin z-depth-0

1 - Emphasis layer

This layer is used for subtle emphasis. Examples are the stream knots, switch levers and attachments in articles
@mixin z-depth-1

2 - Resting layer

On this layer we place our cards and raised buttons.
@mixin z-depth-2

3 - Floating layer

On this layer we place floating buttons and the sticky navbar. Floating buttons need to stand out more than raised buttons or they are already placed in a card, which means they shouldn't have the same elevation as the card itself.
@mixin z-depth-3

4 - Widget layer

This layer is used for dropdowns and autocomplete widgets.
@mixin z-depth-4

5 - Dialogue layer

This layer is used to display modal windows, pickers and drawers. These elements need to be on top of all other elements and will usually only show after a user performs an action.

Inside dialogue you can use raised buttons again.
@mixin z-depth-5

Source: 00-config/mixins/_elevation.scss, line 1

1.5 sass.clearfix Clearfix

Allows the bottom of an element to extend to the bottom of all floated children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()

Source: 00-config/mixins/_clearfix.scss, line 1

1.6 sass.resettext Reset text

Allows an element to reset all text styles, for example in a popover
@mixin reset-text()

Source: 00-config/mixins/_reset-text.scss, line 1

1.7 sass.roundedcorners Rounded corners

Today all modern browsers support the non-prefixed border-radius property. This mixin can be used a shortcut for quickly rounding two corners on a particular side of an object.

@mixin border-top-radius($radius)
@mixin border-right-radius($radius)
@mixin border-bottom-radius($radius)
@mixin border-left-radius($radius)

Source: 00-config/mixins/_border-radius.scss, line 1

1.8 sass.singleline-ellipsis Single line ellipsis

Allows a text to be truncated and get '...' at the end.

Source: 00-config/mixins/_ellipsis.scss, line 1

1.9 sass.list-unstyled Unstyled list

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. @mixin list-unstyled

Source: 00-config/mixins/_list-unstyled.scss, line 1

1.10 sass.multiline-ellipsis Multi line ellipsis

Allows an text to be truncated and get '...' at the end when it exceeds the maximum amount of lines. @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white)

Source: 00-config/mixins/_ellipsis.scss, line 16

1.11 sass.visually-hidden Visually hidden

Make an element visually hidden, but accessible to screen readers, etc. @see: http://a11yproject.com/posts/how-to-hide-content
@mixin visually-hidden

Source: 00-config/mixins/_visually-hidden.scss, line 3

1.12 sass.visually-hidden--off Visually-hidden--off

Turns off the visually-hidden effect.
@mixin visually-hidden--off

Source: 00-config/mixins/_visually-hidden.scss, line 25

1.13 sass.visually-hidden--focusable Visually-hidden--focusable

Makes an element visually hidden by default, but visible when receiving focus.

Use in conjunction with visually-hidden to only display content when it's focused. Useful for "Skip to main content" links; @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 Credit: HTML5 Boilerplate
@mixin visually-hidden--focusable

Source: 00-config/mixins/_visually-hidden.scss, line 43

1.14 sass.responsive-img Responsive image

Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block)

Source: 00-config/mixins/_image.scss, line 1