OpenLab CSS
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.
Docs
You can find documentation here.
Installation
OpenLab CSS works correctly only if CSS stylesheet and JS script are added to the page.
CSS
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"
/>JS script
It adjust sizes of elements for both panels correctly and resizes <iFrame>.
- 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.
<script src="https://unpkg.com/openlab-css/dist/js/main.js"></script>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>Sass integration
- 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.
Acknowledgements
- Thanks Tania Rascia for building Primitive, which was a useful starter for our project.
Contributing
Please feel free to fork, comment, critique, or submit a pull request.
License
This project is open source and available under the MIT License.