Liveweave:101

 (Click image to enlarge)

1. Basic layout

main

Structure of a Liveweave URL

When you click “Save”, a unique URL will be generated every time, e.g. liveweave.com/xyz123

  • liveweave.com/xyz123 –  Standard quad-panel mode with HTML, CSS, JavaScript and Preview panels visible.

  • liveweave.com/xyz123/demo – Full screen “demo” mode, where only the Preview is visible.

Naming your weave

Your official name/title of your weave is whatever you put inside the <title> tags. If you do not have <title> tags in your code, you will not be able to see the name. The default is “HTML5, CSS3 and JavaScript demo“.

name

Even if you entered the <title> incorrectly, no need to worry! You can easily rename it anytime from the weave list, simply by clicking the “Rename” link.

list

Real-time CSS and JavaScript validator

Real-time CSS validation

css-lint

The validation is in real-time. The errors and warnings would appear in the code/panel gutter while you are writing your code!

Real-time JavaScript validation

js-lint

 

Four different layouts to choose from

There are 4 different ways you can set the panels. Depending on your needs you can change them on the fly. If you save a weave with a particular layout, the next time you load it, it will retain the layout.

Layout 1                                                                                                               

layout-example

 

    Layout 2 (Default)  

layout-example-2

 

Layout 3                                                                                                                                          

layout-example-3

 

   Layout 4  

layout-example-4

2. Code-hinting for HTML5, CSS3, JavaScript and jQuery

 

 

code-hinting

 

3. Support for Emmet / Zen Coding

In addition to code-hinting for HTML and CSS, Liveweave also supports Emmet (formerly, Zen Coding). To expand your Emmet code, just select the code snippet and press [Ctrl] + E (in Windows) or [Command] + E (in Mac OS X) from the keyboard. Learn more.

emmet1

4. Download your weave

You can download your weave two ways.

  1. Download as a single HTML file – In this case, you will have the weave as a single HTML file with the CSS code inside <style> and the JavaScript code inside <script> tags respectively.
  2. Download as a packaged ZIP file – In this case, you will have the weave as separate HTML (index.html), CSS (style.css) and JavaScript (script.js) files, in their respective folders. However, in order for this to work you must have <head> (and <body>) tags in your HTML. Learn more.

dowload zip

5. Color & Palette Lab

Available in the Tools menu, the Color & Palette Lab is a good reference of all the colors you may want to use in your code. You can also create your own color palettes. Learn more.

palette

 6. JavaScript library

To select a JavaScript library (e.g. jQuery), just choose the one you want from the JavaScript menu. The list consists of most of the popular libraries. But, in case you don’t see the library you are looking for, just add it inside the <head> tags as you would normally do. For example, if you want jQuery 1.10.2, you can have the following:

<head>  <!-- Do not remove the <head> tags! -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

Note: You must have <head> (and <body>) tags in your HTML. If you don’t have it, Liveweave will ignore any links to external JavaScript libraries.

js menu