NanoStudio 2 is here

Make amazing music. Anywhere.

LEARN MORE

Left Side 50/50

Right side left blank

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3 up even

These columns will collapose on small screens.

Action

3 up even

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Action

3 up even

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Action
Card image cap

3up using BS4 "Cards"

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

3up using BS4 "Cards"

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

3up using BS4 "Cards"

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

A .container can have multiple .row divs.

This is inside of .col-12 div.

A column element can have multiple classes that define the width at different breakpoints. The following colums have each have these classes col-lg-3 col-md-4 col-6. Sets the default width to 50%, makes them 1/3 at 'md' screen sizes and 1/4 at large screen sizes and above.

In other grid examples, the .container > .row elements provide vertical spacing. Since we're not using multiple rows in this case, the column elements also use a utility spacing class of .mb-4. See BS Spacing for more info.

Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Flexible Grid using 'Cards'

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Definition lists

For fun and profit (and responsivity and semantic nerdery)

Definition lists consist of three elements: an outer DL which contains one or more pairs of DT+DD (definition-list-TERM and definition-list-DEFINITION). Loosely, think of these as a way to markup/represent a set of related Key/Value pairs.

OSC Panel

This is the default DL layout. It's also how they will all render on phone screens.

Analog
An analog-modelled oscillator with 6 different waveforms, PWM and oscillator sync.
Wavetable
Allows morphing between different waveforms from a choice of various wavetables.
PD
A Phase Distortion oscillator which provides low-pass and resonant filter-style sounds without the need for an extra filter.
FM
A Frequency Modulation oscillator with 3 FM operators. See the FM Oscillator for more details.
NanoSaw
Creates multiple layered and detuned sawtooth waveforms.
Noise
Produces filtered noise with a choice of different spectral shapes and filtering options.
Sample
Plays mono or stereo samples. Up to 24 sample zones may be created across the keyboard range, with optional crossfades. See the Sample Oscillator for more details.

OSC Panel

Make them render side by side by applying the class row to the DL element and the regular layout classes like col-sm-3 to the DT and DD elements.

This one uses col-sm-2 on the DTs and col-sm-10 on the DDs. The first three pairs also uses col-4 and col-4 which forces them to be side by side even on small screens. Just as an example of using different column classes at different breakpoints. Generally, I think these work best vertically on small screens.

Analog
An analog-modelled oscillator with 6 different waveforms, PWM and oscillator sync.
Wavetable
Allows morphing between different waveforms from a choice of various wavetables.
PD
A Phase Distortion oscillator which provides low-pass and resonant filter-style sounds without the need for an extra filter.
FM
A Frequency Modulation oscillator with 3 FM operators. See the FM Oscillator for more details.
NanoSaw
Creates multiple layered and detuned sawtooth waveforms.
Noise
Produces filtered noise with a choice of different spectral shapes and filtering options.
Sample
Plays mono or stereo samples. Up to 24 sample zones may be created across the keyboard range, with optional crossfades. See the Sample Oscillator for more details.

PERFORM Page

Add a table-like border by adding the class lined to the DL element. This use 3 and 9 column widths. Lines do not render on small screens. Let me know if you'd like me to change this.

AU FULL SCREEN
Dedicates the entire performance page to the AU's native editor UI.

Note: Some AUs won't take advantage of the full screen view.
AU SPLIT KEYS
Dedicates the top half of the performance page to the AU's native editor UI and the bottom half to the keyboard.

Note: Some AUs won't resize for the split view, although most will allow you to scroll their editor vertically by dragging on its background. In some cases, you will have no choice but to use the full screen view in order to gain access to all the controls available in the AU's native editor UI.
MACROS
Dedicates the top half of the performance page to the macro controls and the bottom half to the keyboard.

When the macro controls are visible, tap the HAMBURGER BUTTON in the top right corner of the perform page to invoke the Macro Tools menu.
DUAL KEYS
Shows two keyboards.
FULL KEYS
Dedicates the entire performance page to a single large keyboard.

Alt background test.

Add a border by adding the class lined to the DL element

Analog
An analog-modelled oscillator with 6 different waveforms, PWM and oscillator sync.
Wavetable
Allows morphing between different waveforms from a choice of various wavetables.
PD
A Phase Distortion oscillator which provides low-pass and resonant filter-style sounds without the need for an extra filter.
FM
A Frequency Modulation oscillator with 3 FM operators. See the FM Oscillator for more details.
NanoSaw
Creates multiple layered and detuned sawtooth waveforms.
Noise
Produces filtered noise with a choice of different spectral shapes and filtering options.
Sample
Plays mono or stereo samples. Up to 24 sample zones may be created across the keyboard range, with optional crossfades. See the Sample Oscillator for more details.

One of two 50/50 columns

These will remain side by side at all resolutions

This is a "container--alt" row

These will remain side by side at all resolutions

25% column

See inc/rows/variable-grid.php for alternate 4-up examples

25% column

Abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

25% column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

25% column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

66 col

Right (33) column intentionally blank

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

33 col

  • A list of
  • Absolutely wonderful
  • Things is listed
  • Right here for all

A big full width headline to break things up. It could be fairly long testing testing testing.

33 left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

66 right

Heading 66/33

Right (33) column intentionally blank

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A big full width headline to break things up. It could be fairly long testing testing testing.

Heading 1

Lorem ipsum bold text, consectetur adipisicing link, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum italicized text, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

Lorem ipsum removed text, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.

  • First unordered list item
  • Second unordered list item
  • Third unordered list item

Heading 4

An ordered list below

  1. First ordered list item
  2. Second ordered list item
  3. Third ordered list item

Heading 1 (.container--alt block)

Is STRONG TEXT visible here?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.