How to Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS?

Prevent Bootstrap Modal from Closing when Clicking Outside

By expanding the modal-dialog dimensions to full window, we can avoid the outside click close.


//CSS
.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}
Continue Reading

How CSS Position Properties work?

Position properties in CSS

Position is an essential CSS property for control the positioning of layout elements.

Static Position

All the HTML elements are always positioned to the normal flow of web page. Simply we can tell like default position.

Relative Position

An element with relative CSS property is always positioned relative to its normal (existing) position.

CSS relative position

Absolute Position

An element with absolute CSS property is always positioned relative to its parent element which has relative property.

CSS absolute position

If no parent element which has position property, it is always positioned relative to the document body. When page is scrolled, absolute element will move along with page scrolling.

CSS absolute position demo

Fixed Position

An element with fixed CSS property is always positioned relative to the viewport, it means it stays in the same position even if the page is scrolled.

CSS fixed position

Continue Reading

How CSS Display Property works?

Display Properties in CSS

Display is an essential CSS property for controlling layout structure / content.

Display: block

An element with CSS block property, it starts on a new line and stretches to the full width of row from left to right end.

Default block level elements:

  • div
  • ul
  • p
  • header
  • footer
  • section
  • fieldset
  • h1 to h6
  • table… etc

Display: Inline

An element with inline CSS property, it starts on a same existing line without any line break and wrap some text inside it without disrupting flow of row. It just starts on a same existing line and stretches to the text content size. It cannot have a width and height set.

Default inline elements:

  • span
  • a
  • strong
  • img
  • label
  • input
  • select
  • textarea
  • button
  • sub, sup… etc

Display: inline-block

An element with inline-block CSS property, it is positioning as an inline element but it behaves as a block element with defined width and height properties.

CSS Position properties

Display: flex

Flex layout provides an efficient way to alter its items dimension (width and height), align, distribute space among elements within the document.A flex container expands items to fill available free space, or shrinks them to prevent overflow.

To learn more about flexbox, please access the below link.
http://flexbox.help/

Display: table

An element with table CSS property will acts as a table layout.

Display: none

An element with a none CSS property will hide the element from view.

Display: inherit

An element with an inherit CSS property will apply the parent properties to child element.

Continue Reading

What are the best practices of CSS coding?

Best Practices of CSS Coding

  • Organize your code with proper comments.
  • Use the <link> tag to include all your style sheets in the <head> of the document.

Don’t use @import.

@import directive is much slower than the other way to include style-sheets into a html document.
This will fire an additional HTTP request and block page rendering until its completion.

Specificity of CSS

The ID is the most specific selector, since it can only match one element, and the class is a close second. Use those whenever possible rather than HTML tag names.

/* BAD */
button#back-button { … }
.popular ul li a { … }
.popular > ul > li > a { … }

/* GOOD */
.back-button { … }
.popular-link { … }
.unpopular-link { … }

When using vendor prefixed features, put the standardized rule at the end to ensure browsers optimize and use the standard if they recognize it.
Example:
.thing {
-webkit-transition: all 100ms;
transition: all 100ms;
}

Avoid !important

Avoid using the !important keyword. Treat it like the nuclear option, only to be used in the most extreme of cases. This fundamentally destroys the specificity feature and can even break accessibility for some users.

Developers in the future who are either trying to debug a styling issue, or trying to use normal specificity to override a style for a particular element only to find that they can’t.

Formatting of CSS

  • Use a new line for every selector and every declaration.
  • Use a single space before the opening brace in a set of rules.
  • Use lowercase for elements and shorthand hex values, e.g., #aaa.
  • Hyphenate class selector names; avoid underscores and camelCase
  • Use one level of indentation for each declaration.
  • Add a single space between the property and value.
    Example:
    prop: value; and not prop:value;
  • Always include a semi-colon at the end of the last declaration.
  • Naming convention should be followed.
  • Use shorthand. padding: 15px 0; and not padding: 15px 0px 15px 0px;
  • Avoid units on zero values.

CSS File Handling:

  • Use multiple style sheets, but be aware of them expanding beyond control.
  • Not include unused style rules.
  • Offer a clear place for new styling going forwards
  • Not be a drag in page loading performance
Continue Reading

What are the code standards and best practices for Front End Development?

Coding Standards for Front End Development

Three pillars of front end development:

  • Semantic HyperText Markup Language (HTML) for structure
  • Cascading Style Sheets (CSS) for presentation
  • JavaScript (JS) for behavior and interaction

General Standards

While we are writing code that must reach a desired goal, must be read and understand by others.

Code Consistency.

Usage of the same patterns is critical between team members so as to never cause confusion.

Indentation

  • Please consistently indent, nest, include braces, quotes, and new lines so that code is clear and can be read easily.
  • New code that is added should never deviate from existing formatting conventions or change the indent levels.
  • For all code languages, we recommend the use soft tabs comprised of four spaces per tab. Hitting the Tab key in your text editor should generate four space characters rather than one tab character. This results in our code appearing identical across platforms.
  • If tab stops are favored by a team, simply maintain consistency for a project and it’s deliverable. so developers can make adjustments to their editing environments a single time.

Readability

  • We encourage liberal use of white-space, comments, and descriptive variable names as appropriate for writing easy-to-read code.
  • The ability for another developer to read a code is essential.
  • No need to think about compressed way of code writing while you developing application, we will use automated server side or other build process to optimize files. This includes concatenating files, code minification, gzipping and more.

Areas of critical consistency include:

  • Code formatting
  • Naming conventions
  • File and folder structure
  • Examples or sample code
  • How page components might be broken down or re-used

Points to remember when lookup the UX designs:

  • Templates and types of pages.
  • Which sections of pages (i.e. components) are reused.
  • Type of Frameworks
  • CSS grid systems (LESS, SASS or Custom).
  • Server-Side delivery platforms.

Performance Caveats

In some cases for performance reasons it may be good practice to in-line critical styles in a style block in the document’s head.

This delivers these styles to the browser in the fastest method possible by preventing the need for an additional HTTP request.

CSS Deliverables

Delivered CSS should be concatenated, minified, tested against browser bugs (e.g. MSIE selector count bugs) and extra files should be removed.

File naming conventions should be consistent and language or use-case specific files should be clear and not be easily confused with the global style CSS.

Our CSS should be concerned the below points:

  • Browser Compatibility
  • Media Queries
  • Accessibility and CSS
  • CSS pre-processors usage
  • Internet Explorer or browser-specific bugs
  • Usage of CSS3 transitions, transforms, and more
  • Vendor prefixes
  • Color Management

Best Practices for Front End Development

Click the respective link for the detail view of best practices.

Continue Reading

Some specific CSS uses

Removing dotted outline when link is selected

Below CSS lines used to removing default dotted outline when link is selected.


a, a:hover, a:active, a:focus {
outline:0;
}

Draw Diamond shape using CSS3

After creating square shape using HTML elements like div or span then apply CSS3 transform property.


.square-shape{
  transform: rotate(45deg);
}

Changing Cursor Selection color

The below CSS codes are used to change the cursor selection background color in different browsers.


/* Mozilla based browsers */
selector::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* Works in Safari */
selector::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
selector::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
selector::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
selector::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}

Note: Selector would be any class name, ID name or element name.

How to style the placeholder text?


/* placeholder css */
::-webkit-input-placeholder {  
  color: #BBBDBF; /* chrome, safari */
}
::-moz-placeholder { /* Firefox 19+ */
  color: #BBBDBF;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #BBBDBF;
}
:-moz-placeholder { /* Firefox 18- */
  color: #BBBDBF;
}
Continue Reading

Useful CSS hacks for specific browsers

browser specific CSS hack codes

IE-10

// eg: margin-top:10px\9;

CSS hack for IE-11

// eg: @media all and (-ms-high-contrast:none){ }

CSS hack for Chrome

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) { }

CSS hack for Safari


@media screen and (-webkit-min-device-pixel-ratio:0) {
   ::i-block-chrome, .footIcon{
     width:25% !important;
} 
}

Adding browser specific prefix:

Prefix for Mozilla

// eg: -moz-transform: rotate(90deg);


@-moz-document url-prefix() {
  .logo {
     width:300px;
   }
}

CSS hack for Microsoft Edge browser


@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Prefix for Chrome and Safari

// eg: -webkit-transform: rotate(90deg);

Prefix for IE

// eg: -ms-transform: rotate(90deg);

Prefix for Opera

// eg: -o-transform: rotate(90deg);

Continue Reading

Fixed header position jumps down when keypad is opened in IOS IPhone device only.

Fixed header position jumps down when keypad is opened

We can overcome this issue by using below script. The logic is when we focus the input elements only, keypad will open.

isiPhone method is used to detect the Iphone device.


 $("input,textarea").focus(function () {
   if (isiPhone()) {
        //Set of conditions When keypad is opened
      }
      }).focusout(function () {
      if (isiPhone()) {
        //Set of conditions When keypad is closed
   }
});

Note:
navigator.userAgent.match method also used to detect the devices.

Continue Reading