1 sass Sass
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.
_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
Usage
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.
Brand
State
Grayscale
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
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
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()
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()
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)
00-config/mixins/_border-radius.scss
, line 1
1.11 sass.responsive-img Responsive image
Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block)
00-config/mixins/_image.scss
, line 1