openlab-css

v0.2.4

Published

4 years ago

A CSS framework for building apps adjusted for screens at OpenLab laboratory of Technical University of Košice

0High
0Medium
0Low

branopuzder

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme