Tag: CSS

Color palettes for web developers


Web without colors ? Am I watching a black and white movie ? There are plenty of ways you can use colors. Most of the web UI designers have the palettes.

Codies like me always love to have minimal editors like VSCode / Atom / Sublim. There are plenty of website offer variety of palletes and gradient map.

One of my favorite is UI Gradient which let me choose between colors and gradients and simply copy the css to my web app .

The others in my list offer cool cool palettes and Canva is another favorite of mine

How to create animated tool tip container with CSS and jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn to create custom tool-tip container with CSS and jQuery?

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed. 

$(function () {
// code block here
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

and the container look like the following (HTML)

 <section class="tool-tip-hide alert text-info" id="ask-tool-tip">            
                   </section>

CSS

Here is our CSS code to hide and show the container

.tool-tip-hide{
    display: none;
}
.tool-tip-show{
    display:inline     ;
}

jQuery code 

 $(function () {
  
  var info = $("#ask-tool-tip");
  function resetTooltip() {
    info.removeClass("tool-tip-show");
    info.addClass("tool-tip-hide");
    info.html('')
  }

  resetTooltip();

 async function Message(msg) {
    resetTooltip();
    info.html("");
    info.append(`<i>${msg} !</i>`);
    info.removeClass("tool-tip-hide");
    info.addClass("tool-tip-show").fadeOut(3000, () => {
        info.fadeIn()
  
    });
  
  }
$("#btn-click").on("click", () => {
 Message("Thank you");
})

}

In the above jQuery we are done the following

  • locate the container adding class to the HTML ( tool-tip-hide)
  • create custom method for setup message with animation
  • call the Message function inside a event handler

How to use CSS styles in Reactjs


How to use CSS styles in Reactjs

Web app without CSS as to Tea without sugar. If you don’t know CSS , grab some CSS lesson from the WC3 school and come back. So how we use CSS in React apps ?

We have two options

  • Include regular CSS stylesheet file using import
  • Implement a functional component as Stylesheet

First option is look like simple go head and create a style.css file and add the following CSS style in int

.container{
  background-color: skyblue;
}
h2 {
    text-align: center;
}

Import the style sheet

Import the stylesheet as we import JS modules in React .

import './Styles.css'

Using the styles

Since it is a regular style sheet we can use it with className attribute as follow. A class file in style file start with period (.) and id is begins with hash (#). We can combine multiple class in a ClassName attribute using space.

Here is the sample style usage in render portion of a React ClassComponent

render() {
    return (
      <div className="container">
        <h1>This is a heading</h1>
      </div>
    );
  }