Upcomming major update (4.0)

A major update to LS is now in the making, which will revamp most of the codebase and introduce new features.

New things will include:

• Migration to a new CDN URL syntax
• Improved tree-shaking

Update 3.5

Welcome a new component - AutomationGraphEditor!

This new component allows you to easily include a beautiful and fully customizeable graph editor, primarily intended for automations (eg. gain on an audio oscillator), but is great for any other possible usage scenarios.
It uses SVG for rendering, offers an easy way to scale, has a simple API with efficient instancing etc.

In this update, LS.EventResolver (as component) was deprecated in favor of LS.EventHandler (as a standalone class) - compatibility is retained at this moment.

Recent changes (3.4.5)

1) Colors

The color system was updated, with many new presets, new shades in CSS, more customization, and upgraded LS.Color API:

2) Timeline

• CDN backend will get a makeover with version control and new tree-shaking (not live yet)
• Optimisations, bugfixes and cleanups all across the framework
• Migrated to SCSS and separated components in source

New components in 3.4.0:

1. PatchBay

An extensive component adding the full functionality of a patch bay, with an infinite workspace.

2. MultiSelect

Allows you to easily enable mutiselect on any element.

3. Knob

Allows you to create fully customizable, beautiful and responsive knobs. Provides arc functionality, and a lot more to allow you to make any knob you need.

4. Color

With this component, you can finally add custom accents and manage colors + themes.

5. ToolBox

A full-on bash simulator and debugger, instantly accessible on any website with LS.

6. Resize

With this component, you can easily add resizing functionality to any element in all 8 directions. Supports absolute and static modes for different position types, or can be used just for value reporting for an entirely custom implementation.

7. GraphGL

A beautiful linear graph renderer

7. Progress & Seeker

Progress & range components.

..and almost every other component was greatly improved.

Following is old / outdated content;

Component system

LS has a rich component system that allows you to create, manage and use components with ease.
It automatically adds things like events and takes care of managing instances.

Warning: The following text about Tiny is very out of date and mostly deprecated. Many of the methods below no longer exist in the latest releases.

Tiny

Tiny was originally it's own thing, but was later merged into LS.
Tiny is a set of single-letter super-helpful and efficiency-improoving utilities.
There could be a whole chapter about it, but here are some basic samples:

• Q Is the element selector, that also adds new methods to elements.
  Q("something") will select all "something" elements, and all affected elements will be given some cool prototypes. There is a lot of them, here is a few:
  
  • attr lists all attributes as an object with names and their values. If a first argument is set, returns the value of the specifed attribute. If a second argument is set, it changes the attribute value.
  • class lists classes, if a first argument is set (either a string or an array), it adds classes to the element. If second arg is either 0 or "remove", it removes classes.
  • add Adds new elements to the element. Can be either an array, single value or list of arguments, where each value can be either an HTML string or an element. By default, it appends at the end, but you can also use "addBefore" or "addAfter". "addOnce" adds the element only if there isn't an element with the same ID attribute.
  • set Same as add but clears the element first.
  • get Gets first element inside the element by its query selector. getAll gets all elements.
  • has Check if the element has elements by their selector. Returns a boolean.
  • query Generates a queryselector/path to the element.
    ... there are many more, feel free to discover them.
• O Is same as "Q" but gets the first element. If no selector provided returns body.
• N Is the element builder. Accepts 2 args, the tag and options. For example N("div") makes a new empty div. N("div","innerHTML") works, just as N("div",{inner:"..."}) does. The options can do a whole lot more - "inner" is the same as "add" explained above, aka it can be an array of elements or HTML code. There is also "attr", "class", "style", and many more things you can set. If you omit the first arg, it'l default to div, so N({class:"test"}) is also valid.
• S Is a style utility. If you provide an element as the first arg, it'l return it's computed styles. If you provide a second arg, it'l apply styles from either an object or a string. If the first arg is an object, it'l turn it into a inline style string.
• E Is an element observer. First arg is the element to observe for node changes and the second is the callback function.
• T Is a short version of try{}catch(e){}
• U Is the URL utility. U("...").goTo() for example, will go to that url. U().params() returns an object with the url parameters as keys with their values, etc. First arg defaults to the current URL.
• M Is a misc utility collection. For example M.x and M.y will always corespond to the mouse position relative to the document, M.GlobalID returns a short but unique ID that will never repeat on the page's instance, M.on is the stackable equivalent of window.addEventListener and so on.

All of those are by default "globalised" to the window, and accessible trough LS.Tiny.

Random examples:

Here are some randomly-picked examples of what LS can do, out-of-the-box.
Of course there is a lot more, but you gotta explore that yourself.

1. Default design styles

ls-flat, ls-fluent, ls-sharp



Of course you can create your own from scratch, simply create your own style in CSS.
To apply the style, add an "ls" attribute to the element where you want to apply it to (can be body), and also an attribute with which style you want, like "ls-fluent".
Theres also a color system, add "ls-[color]" (like ls-blue, ls-yellow...) attribute to the parent element to apply an accent color. CSS variables will be available, like --accent, --accent-dark and --color-bg (text color to be used when using accent as a background). For transparency, use rgba(var(--accent-raw), 200), replacing "80" with the value you want (0-255, 255 being fully opaic).

2. Improoved select

Synchronizes with a regular <select> element, supports <optgroup>, the "disabled" attribute and a lot more.
To set-up: LS.Select("id", ...element) (defaults to the first select element it founds. LS.Select.batch("select") does this to all select elements, LS.Select.observe("select") applies it to all current and later added elements.)

3. Automatic navbar builder

Structure would be, for example:

4. Wizzards

You can create awesome automated wizzards with LS.Steps

5. Console/Terminal emulator

LS.Console is a component that adds an interactive & highly customizable console to your app.
It has 2 major modes, "terminal" and "debug console".

Debug console usage example: (from Hastrell playground)


Terminal usage example: (from ExtraGon panel)

Notable features:

• ANSI \esc parsing, allowing you to directly pass it terminal output and get all the crazy rainbow stuff.
  

6. Special elements, like groups

Code

Will result in:


Tabs are also super simple to setup:

<ls-tabs>
  <ls-tab tab-title="my tab">
    ...
  </ls-tab>
  <ls-tab tab-title="hello world"> ... </ls-tab>
  ...
</ls-tabs>

Result:

(Same applies to steps, but with <steps> and <step>, and you can also set an "if" attribute on a <step> element to add a condition under which it will be visible, like if="field=value" only displays that step if a field "field" is equal to "value")
Those are all designed to be as simple to use and use as little boilerplate as possible.