00-config/_variables.scss, line 3
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
_settings.scss, line 5
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.
When using a primary color in your palette, this color should be the most widely used across all screens and components.
Palettes with a secondary color may use this color to indicate a related action or information.
The accent should be used for promoted actions only.
Colors are defined as variables. You also use some predefined classes such as
For states in forms, messages and other feedback we use state colors to indicate whether user actions were performed successfully or failed for example.
00-config/variables/_colors.scss, line 1
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
00-config/mixins/_media-queries.scss, line 1
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.
1 - Emphasis layer
This layer is used for subtle emphasis. Examples are the stream knots, switch levers
and attachments in articles
2 - Resting layer
On this layer we place our cards and raised buttons.
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.
4 - Widget layer
This layer is used for dropdowns and autocomplete widgets.
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.
00-config/mixins/_elevation.scss, line 1
Allows the bottom of an element to extend to the bottom of all floated
children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
00-config/mixins/_clearfix.scss, line 1
Allows an element to reset all text styles, for example in a popover
00-config/mixins/_reset-text.scss, line 1
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)
00-config/mixins/_multiline-ellipsis.scss, line 1
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.
00-config/mixins/_border-radius.scss, line 1
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.
00-config/mixins/_list-unstyled.scss, line 1
Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block)
00-config/mixins/_image.scss, line 1