Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (102 sloc) 3.63 KB
/*
---
name: Base sizing units
category: Foundations/Variables
tag: variables
---
These values defines the spacing and font size of all the framework. **Every property or mixin that
involves sizes is affected by these values**. That's the reason why most of the elements of
the foundations uses relative units like `em` and `rem`.
These base sizing units are:
* `base-type-zoom`: represents the base zoom of the page. This value is added on the `html` selector
and it allow us to grow the site proportionally. For most of the browsers, 100% font-size is equal
to 16px. Browsers that have a different value for 100% are not an issue because the site grows
correctly. This framework uses this property to decrease or increase the spacing of the site
based on media queries.
* `base-type-size`: defines the base font size of the body text. The current value refers to
the `base-type-zoom`: 100% (16px) -> 1em -> 16px body text. We use a relative units to be able to
change the base font size using `base-type-zoom`. It also allow browsers to define their own
font size based on user preferences.
* `scale`: this is the ratio of decrease or increase of the spacing unit. Combining the
`base-type-size` and the `scale`, the framework defines proportional sizes for spacing. You
can check the current proportion on [TypeScale](http://type-scale.com/?size=16&scale=1.333&text=Bitnami%20Rocks!&webfont=Source+Sans+Pro&font-family=%27Source%20Sans%20Pro%27,%20sans-serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333).
* `size-unit`: this is the base size unit for font sizes and spacing. We use this unit for spacing
and font-sizes.
```scss
// Sizing values
$base-type-zoom: 100%;
$base-type-size: 1em; // 16px
// Major Third
$scale: 1.250;
// Basic size unit
$size-unit: $base-type-size * $scale;
$su: $size-unit;
```
*/
// Sizing values
$base-type-zoom: 100% !default;
$base-type-size: 1em !default; // 16px
// Fourth
$scale: 1.250 !default;
$line-height: 1.5 !default;
// Basic size unit
$size-unit: $base-type-size * $scale;
$su: $size-unit;
/*
---
name: Breakpoints
category: Foundations/Variables
tag: variables
---
For managing breakpoints, we're going to use https://github.com/zellwk/mappy-breakpoints. It's a really useful library to work with Breakpoints. Also, this library uses `em` units internally and based on this [research]( https://zellwk.com/blog/media-query-units/) it's the best solution for breakpoints.
```scss
$breakpoints: (
xs: 320px,
sm: 480px,
md: 768px,
lg: 900px,
xl: 1100px,
uxl: 1300px
);
// If only one value is provided, mappy-bp will produce a min-width query.
// If a two values are provided, mappy-bp will produce a min-width and max-width query.
// If a max-width or max string is provided, mappy-bp will produce a max-width query.
$mappy-queries: (
phone-portrait: mappy-bp(max-width xs),
phone: mappy-bp(xs sm),
phone-land: mappy-bp(sm md),
tablet: mappy-bp(md lg),
desktop: mappy-bp(lg xl),
wide: mappy-bp(xl uxl),
ultrawide: mappy-bp(uxl)
);
```
*/
$breakpoints: (
sm: 480px,
md: 768px,
lg: 900px,
xl: 1100px,
uxl: 1300px
);
$mappy-queries: (
// Specific
phone: mappy-bp(max-width sm),
phone-land: mappy-bp(sm md),
tablet: mappy-bp(md lg),
desktop: mappy-bp(lg xl),
wide: mappy-bp(xl uxl),
ultrawide: mappy-bp(uxl),
// Below
b-phone-land: mappy-bp(max-width sm),
b-tablet: mappy-bp(max-width md),
b-desktop: mappy-bp(max-width lg),
b-wide: mappy-bp(max-width xl),
b-ultrawide: mappy-bp(max-width uxl),
// Above
a-phone: mappy-bp(sm),
a-phone-land: mappy-bp(md),
a-tablet: mappy-bp(lg),
a-desktop: mappy-bp(xl),
a-wide: mappy-bp(uxl),
);
You can’t perform that action at this time.