Lampix Apps API
  • Introduction
  • Application Development
    • Getting Started
      • Up and Running
      • Boilerplate
    • Step by step app
      • What We'll Build
      • Environment Setup
      • Styling
      • HTML Structure
      • NeuralNetworkClassifier
      • MovementBasedSegmenter
      • Final Step
      • Extras
    • LampixJS
      • API Reference
        • Watcher
        • RegisteredWatcher
        • .watchers.add
        • .watchers.remove
        • .watchers.pauseAll
        • .watchers.resumeAll
        • .presets.button
        • .helpers.rectangle
        • getLampixInfo
        • switchToApp
        • exit
        • getApps
        • getAppConfig
        • getAppMetadata
        • writeJsonToFile
        • readJsonFromFile
        • transformRectCoords
        • constants
      • Examples
        • NeuralNetworkClassifier: Buttons
        • MovementBasedSegmenter
        • Counter App
      • Migrating from v0.x.x to v1.0.0-beta.x
      • Ecosystem
    • Deploying
      • Application Structure (production)
      • Local Deploy
    • Standard Watchers
    • Custom Watchers
      • Description
      • Environment Setup
      • Directory Structure
      • End result
      • QRCodeDetector implementation
    • Community
  • Lampix Simulator
    • Installation
    • Usage
      • Basics
Powered by GitBook
On this page

Was this helpful?

  1. Application Development
  2. Step by step app

Styling

Copy and paste this in a src/styles.css file right next to src/index.html and src/index.js.

body {
  color: white;
  font-family: sans-serif;
}

.area {
  border: 1px solid #FFFFFF;
  border-radius: 10px;

  transition: border-color 200ms ease;
}

.area-title {
  position: absolute;
  top: -2em;
  text-align: center;
  width: 100%;
}

.nnc {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);

  width: 200px;
  height: 200px;
}

.nnc-recognized-class {
  position: absolute;
  bottom: -2em;
  text-align: center;
  width: 100%;
}

.mbs {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: 600px;
}

.mbs-object {
  position: absolute;

  border: 3px solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  width: 50px;
  height: 50px;

  animation: grow 1s ease forwards;
}

@keyframes grow {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

Then import the file in index.js to let Webpack know about it and apply the styles. It will take care of linking it in index.html on its own when the time comes.

// index.js
import lampix from '@lampix/core';

import './styles.css';
PreviousEnvironment SetupNextHTML Structure

Last updated 6 years ago

Was this helpful?