LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity
LibreGaming Frontend Styles contains the stylesheets and code used on the LibreGaming Website. Frontend Styles offers responsive design and modularity. https://libregaming.org
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.
13 Commits 3 Branches 0 Tags 263 KiB
SCSS 37.1%
HTML 32.1%
CSS 22.8%
JavaScript 8%
Go to file
spongycake ba36dca6e1 +container, full-width-container 
Container's max-width was reflected to setting $container-page-width found within settings.

Container makes use of $gutter-half from settings for easier coding and
consistency.

Container now makes use of media queries. We add and subtract margins based on screen size. In particular, we register margin gutters when the viewport width is within the container-page-width.

.full-width-container is set to 100% width, expanding fully for each screen size. This additional class is expected to be used for content outside of textual information e.g. artwork.
 		2022-01-28 12:23:27 +00:00
public live website files 2022-01-23 19:11:30 +00:00
src +container, full-width-container 2022-01-28 12:23:27 +00:00
.gitignore Initial commit 2022-01-23 18:48:18 +00:00
LICENSE Initial commit 2022-01-23 18:48:18 +00:00
README.md first description and details of project 2022-01-23 19:12:53 +00:00
package.json + sass mq for media queries support 2022-01-26 00:54:15 +00:00
webpack.config.js webpack configurations 2022-01-23 19:12:32 +00:00

README.md

🚀 LibreGaming Design System!

This project contains code and styles useful for those wanting to copy the look and feel of LibreGaming. This serves to bring consistency to across LibreGaming service and avoid repeating work.

Run locally

Web files are provided in public folder, you can view them via a Web Browser. The files are ready, no need to setup a build environment.

For those looking to copy beautiful layout and styles, include style.css inside your html files. Extra functionality, such as dropdown menus, is enabled by also including 'app.js' inside your html files.

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