A CSS framework built with Sass for developing new information screens at OpenLab at Technical University of Košice.
The aim of OpenLab CSS is to style all basic HTML Elements, so they display correctly at both OpenLab's display panels.
You can find documentation here.
OpenLab CSS works correctly only if CSS stylesheet and JS script are added to the page.
It styles HTML elements and offers you shared components.
- You can download stylesheet or use this UNPKG link: https://unpkg.com/openlab-css/dist/css/style.min.css
- Add this stylesheet to the head of your page.
<link rel="stylesheet" href="https://unpkg.com/openlab-css/dist/css/style.min.css" />
It adjust sizes of elements for both panels correctly and resizes
- You can download JS script or use this UNPKG link: https://unpkg.com/openlab-css/dist/js/main.js
- Add this JS script to the head of your page.
All set! Now all HTML Elements will look openlabish. Don't get scared, they're much bigger than normal ones, but so are the Openlab's displays.
A starter snippet
You can also start with this premade HTML snippet.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>OpenLab CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://unpkg.com/openlab-css/dist/css/style.min.css" rel="stylesheet" type="text/css" /> <script src="https://unpkg.com/openlab-css/dist/js/main.js"></script> </head> <body></body> </html>
- If you wish to modify our OpenLab CSS or enhance it, you can do so:
# Clone the repo git clone https://git.kpi.fei.tuke.sk/openlab-dev/openlab-css # Install Dev-dependencies npm install # Watch for file changes npm run sass:watch # Build a minified production build npm run sass:build
Hands down on OpenLab CSS
In the project you can find SCSS files which can be modified, but usually you will add your rules, see
src/scss/style.scss where you can import your SCSS files. We also have previews, so you can see what can be built with this CSS framework.
- Thanks Tania Rascia for building Primitive, which was a useful starter for our project.
Please feel free to fork, comment, critique, or submit a pull request.
This project is open source and available under the MIT License.