SimpleComponents Library [SCL]

Simple open-source JS library that introduces simple most popular and most used components that are ready to use at the moment.

Objective

This library contains four commonly used components nowadays, each component has its own unique class, so you can use this class with any of your elements in your project to be able to call this component easily.

Get Started

• For production:-

  • Move the bundler.js file that exists inside the assets folder in the dist folder into your project environment as a js library file, then create a reference src script to this file in your code, to be able to read it, for example:-

  <script src="js/libraries/bundler.js"></script>
  

  • Now you are ready to use the library components, as I will show below.

• For development:-

  Note:- I have created a ready HTML demo file that contains examples of all the library components for those who want to develop the library with me and need all the components structure as HTML elements, so you can find this file inside the dist folder.

  • 1- Fork, clone or download this repository to your local machine.

  • 2- Be sure that you install the Node.js environment in your machine.

  • 3- Open your terminal and be sure that you are inside the correct destination of the library, while you must be in the same path of the package.json file.

  • 4- inside your terminal run these commands:-

    • install dependencies.

    npm install
    

    • start the server.

    npm run serve
    

  • 5- Once the server is running, visit (localhost:8080) in the browser to view the library and now you can treat with.

  • 6- After finishing the development phase, you can now move to the build step for production, as this step requires to run the command below to build, compress and bundle your code into the bundler.js file as it is the production file for the library.

    • build your code.

    npm run build
    

Library components

• Component#1: (Tooltip)

  • Description: This component is used to show a hidden message that will appear when hovering on a specific element.

  • Usage: Add a class named tooltip-scomp to the specific element you want to hover on it to show a hidden message, then add an attribute named data-message to this element, and the value of this attribute will be your hidden message.

  • Example::

    <p>Lorem dolor sit amet consectetur adipisicing elit. Voluptate sequi odit totam. Quod maiores saepe sequi. <span class="tooltip-scomp" data-message="I'm a tooltip!!">Illum aspernatur</span> aut voluptatum, sequi quibusdam laudantium? Laborum asperiores consequuntur eum corporis exercitationem debitis.</p>
    
    

  • Result::

  Before hovering

  

  After hovering

  

• Component#2: (Dropdown)

  • Description: This component is used to render an accordion that has 2 behaviors: (expand) to show a content and (collapse) to hide the same content, by toggle clicking on this accordion.

  • Usage: Add a class named dropdown-scomp to the specific element you want to render it as accordion, then inside this element you will create (2) elements. First element has a class named trigger and this element contains the heading name of the accordion. Second element has a class named content and this element contains the content of your accordion that will be shown and hidden when expanding and collapsing.

  • Example::

    <div class="dropdown-scomp">
      <div class="trigger">Awesome T-shirt Designs</div>
      <div class="content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis possimus, a natus totam sequi velit? Vel cupiditate hic incidunt quam laboriosam tenetur nam, voluptate, necessitatibus ex porro, soluta accusantium aspernatur.</p>
      </div>
    </div>
    <div class="dropdown-scomp">
      <div class="trigger">Cool Sticker Printing</div>
      <div class="content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis possimus, a natus totam sequi velit? Vel cupiditate hic incidunt quam laboriosam tenetur nam, voluptate, necessitatibus ex porro, soluta accusantium aspernatur.</p>
      </div>
    </div>
    

  • Result::

  Collapse

  

  Expand

  

• Component#3: (Tabs)

  • Description: This component is used to render multi tabs buttons, every tab has its own hidden content that will be shown only if you clicked on its own tab.

  • Usage: Add a class named tabs-scomp to the container element that will contain the tabs buttons list and the content box for each tab, then inside the container element you will create (2) elements. First element is a ul element that will contain li elements which their innerText will be the name of every tab, and each li element should contain a class named trigger and an attribute named data-target, the value of this attribute will be the ID name of the content for each tab with a # sign before this ID name. Second element is the content boxes, every content box refers to its own tab by its ID, for example if a tab has a data-target attribute with a value #about, so its content box should contain ID named about without # sign here, then add a class named content to each content box, and inside the content box you will add your content text that you want to show.

  Note: You may need to add a class named active to a default tab and to its content box also, so it will be the default tab that will display its content automatically by default in the initial state.

  • Example::

    <div class="tabs-scomp">
      <ul>
        <li class="trigger active" data-target="#about">About</li>
        <li class="trigger" data-target="#delivery">Delivery info</li>
        <li class="trigger" data-target="#returns">Returns info</li>
      </ul>
      <div id="about" class="content active">
        <h3>about</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima suscipit assumenda mollitia nostrum atque facilis neque, non blanditiis deleniti, ab numquam similique eligendi soluta necessitatibus, ex quibusdam illum eaque voluptate.</p>
      </div>
      <div id="delivery" class="content">
        <h3>delivery</h3>
        <p>Non blanditiis deleniti, ab numquam similique eligendi soluta necessitatibus, ex quibusdam illum eaque voluptate.Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima suscipit assumenda mollitia nostrum atque facilis neque.</p>
      </div>
      <div id="returns" class="content">
        <h3>returns</h3>
        <p>Adipisicing elit. Minima suscipit assumenda mollitia nostrum atque facilis neque, non blanditiis deleniti, lorem ipsum dolor sit amet consectetur ab numquam similique eligendi soluta necessitatibus, ex quibusdam illum eaque voluptate.</p>
      </div>
    </div>
    

  • Result::

  About is the default active tab

  

  When clecking on the delivery info tab

  

  When clecking on the returns info tab

  

• Component#4: (Snackbar)

  • Description: This component is used to render a snackbar box that contains a specific message, this snackbar box will be hidden until you click on a specific button, so the sncakbar box will popup from the top of the window as an alert message.

  • Usage: Create a button element and add a class named snackbar-btn-scomp to it, and an attribute named data-message, the value of this attribute will be your message that will be inside the snackbar box when it popups after you click the button.

  • Example::

    <button class="snackbar-btn-scomp" data-message="Simplecomponents!! Snakebar">click me</button>
    

  • Result::

  Before clicking the button

  

  After clicking the button

  

Versions

• v1.0

This is the starting vesion of the library, I will enhance it in the next versions by adding more components and some other features that absolutely will improve the performance.

Built with

• CSS
• JS

Dependencies

• Babel
• CSS-Loader
• Style-Loader
• Webpack

Author

• Mohamed Elhawary

Contact me through my social accounts

• Email: mohamed.k.elhawary@gmail.com
• Linkedin
• Github
• Behance
• Codepen

License

Licensed under the MIT License