openlab-css

    0.2.4 • Public • Published

    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.

    <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>.

    <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.

    Keywords

    none

    Install

    npm i openlab-css

    DownloadsWeekly Downloads

    1

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    72.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • branopuzder