This website requires JavaScript.
Explore
Help
Register
Sign In
LibreGaming
/
frontend-styles
Archived
Watch
14
Star
0
Fork
You've already forked frontend-styles
0
Code
Issues
2
Pull Requests
Projects
Releases
Wiki
Activity
This repository has been archived on
2022-02-28
. You can view files and clone it, but cannot push or open issues or pull requests.
0545085e74
frontend-styles
/
src
/
scss
/
helpers.scss
3 lines
56 B
SCSS
Raw
Normal View
History
Unescape
Escape
introduce SASS helpers
2022-02-15 23:33:40 +01:00
@import
"
helpers/image
"
;
Grid, with rows and columns, see -> A number of classes have been added to control the layout in a grid-based way. To start `row` is wrapped the elements you wish to group in a horizontal line. Next up, `grid-small` and `grid-large` relate to columns and behavior on screen size. For example, `grid-large` will trigger layout changes when the screen reaches a "desktop size" and `grid-small` for "mobile size". The list of available column widths: * half * one-fourth * three-fourths * one-third * two-thirds Going in the order they are declared, for example, columns A,B - when A is one-third and B is two-thirds. This means A will occupy 33% and B will occupy 66%. Additionally, look at _sass-mq.scss file if you want to define different screen sizes. EXAMPLE: ``` <div class="row"> <div class="grid-large two-thirds"> 2/3 </div> <div class="grid-large one-third"> 1/3 </div> </div> ``` ===Sass API=== We have a helper called `media-query`. It directs calls to the sass-mq library. Say we wanted to include a breakpoint in your sass files, do the following: ``` @include media-query($from: mobile) { // content } ``` You are now generating a media-queries for mobile screens. To understand what arguments can be passed to `media-query` then look at the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/) === Other === Technical - implementation being used in grid is flexbox. Do not expect support for standard HTML Grid Layout.
2022-02-26 15:28:51 +01:00
@import
"
helpers/media-query
"
;