0545085e74
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.
|
||
|---|---|---|
| public | ||
| src | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
| package.json | ||
| webpack.config.js | ||
README.md
🖌️ LibreGaming Frontend Styles
This project contains code and styles useful for those wanting to copy the look and feel of LibreGaming. This serves to bring consistency across LibreGaming services and avoid repeating work.
Download Stylesheet
Web files are provided in public folder. Point your Web Browser here press the Download button at the top.
For those wanting layout and styles, add style.min.css inside your HTML. Extra functionality, such as dropdown menus, is enabled with scripts.js.
Once done, you can begin using the style definitions within HTML elements. For example, text-lightblue renders text with LibreGaming's blue branding colours.
Assets
Assets such as logos are available inside src/assets.
Development
You will need Node.js installed if you want to develop the project's code.
npm run build
to bundle your application.