Show your terms!

Why?

CLI interactions are confusing to understand at first sight because the commands are mixed with the application response.

It's very important to be didactic to your users and Show your terms! can help you with that!

Size & Performance

Show your terms! script has just ~1.8Kb minified and its performance-aware and library agnostic. The CSS file has ~1.4Kb and is optional.

Instalation

Enjoying a package manager?

bower install show-your-terms

npm install show-your-terms

Import it using rawgit.com:


  <!-- javascript -->
  <script type='text/javascript' src='https://cdn.rawgit.com/kandebonfim/show-your-terms/master/dist/show-your-terms.min.js'></script>
  <!-- stylesheet -->
  <link rel='stylesheet' href='https://cdn.rawgit.com/kandebonfim/show-your-terms/master/dist/show-your-terms.min.css'>

Or just ↓ download the zip file ↓.

Usage

You can use Show your terms! in declarative way (recommended):


  <div class='showyourterms'>
    <div class='type' data-action='command' data-delay='400'>Hello, show your terms!</div>
    <div class='line yellow' data-delay='400'>hi, motherfocka!</div>
    <div class='type' data-action='command' data-delay='400'>What is your name?</div>
    <div class='line yellow' data-delay='4000'>My name is Terms, Show Your Terms.</div>
  </div>

And initialize it running:


  new ShowYourTerms('.showyourterms');

Or you can do it in the programmatically way:


  <div class='showyourterms'></div>

Adding the content via js:


  var syt = new ShowYourTerms('.showyourterms');
  syt.addCommand('Hello, show your terms!');
  syt.addLine('hi, motherfocka!');
  syt.addCommand('What is your name?');
  syt.addLine('My name is Terms, Show Your Terms.');
  syt.play();

There's a codepen demo available too.

Styles

Show Your Terms' styles are optional, but pretty nice!

This is a command.

This is a type line.

This is red line.

This is yellow line.

This is green line.

This is blue line.

This is grey line.

This line blinks.

And this one is underlined.

The cursor blinks while typing...

...and while typing a command too.

Themes

You can choose which color scheme matchs better with your website:

So, how you doing?

hmpf, pretty standart.

hm, and now?

dude, I'm so dark and goth.

how about this one?

I see the light! AND IT HURTS!

That's it

Happy coding, Folks! ☕️

Simple demos of your applications' terminal commands.