Design Your Page

Changing the HTML design

Stylesheet

As you put so much effort making the HTML to move obniz, you would want it to look cool when showing it to your friends.

That's when you can use stylesheet.
Stylesheet defines the position, color, size, etc. of every part of HTML.

Each component of HTML is made of something called DOM.

<h1>Hello</h1>
<button id="button1">LED ON</button>

In the above example, h1 is DOM. button is also DOM, and so is body.
With stylesheet, you can change its appearance without changing HTML.
In HTML, CSS is used as stylesheet.

CSS

If you open the example HTML above, you can see a webpage like below. This is Safari on Mac.

It doesn't look so bad. But, the button is tiny and difficult to press. Let's improve this using CSS.

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.4.0/obniz.js"></script>
  <style>
    h1 {
      color: red
    }
    #button1 {
      padding: 50px;
    }
  </style>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>
<button id="button1">LED ON</button>


</body>
</html>

The webpage will now look different, like this.

The text "Hello" is in red and the size of the button is larger.

CSS can be written in <style>tag.
Style tag can be written anywhere in HTML, but the top part is better.
You can style the HTML in that tag.

In the case above,

  1. texts on h1 tag must be in red.
  2. DOM which has id "button1" must have a padding (the internal margin) of 50px.

were set.
And this design affects the whole HTML.(all h1 tags are in red)

CSS is very common.
You can see what you can do on the web.

Reference:
https://www.w3schools.com/css/

Incorporating CSS

You actually do not have to prepare your own CSS from scratch, as many people publish their CSS with cool designs. You can simply incorporate one of them.

Twitter Bootstrap is a very famous one.

http://getbootstrap.com

This is free. Let's incorporate this.

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div id="obniz-debug"></div>
<h1>Hello</h1>
<button id="button1" class="btn btn-primary">LED ON</button>

</body>
</html>

<link> tag will allow you to import an external CSS file from the internet.
Now we are including Twitter Bootstrap version 4.1.1
And something called button class is added to the button.
If you run this, it will look like this.

It looks very cool.
We added button class to the button.
So the button changed its color to blue.
Bootstrap has many definitions like "DOM that has class button is blue".
So the only thing you need to do is to just add class and other attributions.

You can see the document below to see what you can use.

http://getbootstrap.com/docs/4.0/getting-started/introduction/



Next : How to make my parts

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us