How to make Iframe and other embedded content behave responsively?

It’s easy to make an iframe’s width dimension to 100% of its container, but sizing it’s height is tricky — especially if the content of the iframe changes height depending on page width within the iframe.


<div class="responsive-container responsive-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

To achieve responsive iframe we can use following CSS codes.

The key idea is to specify the parent container’s position to be relative. This allows to absolutely position the iframe within it, which is needed to make it responsive.


responsive-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
/* 16x9 Aspect Ratio */
.responsive-container-16x9 {
  padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.responsive-container-4x3 {
  padding-bottom: 75%;
}
.responsive-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Iframe should now proportionally resize based on the browser size.

Other Techniques:

Use of Pym.js:

Pym.js embeds and resizes an iframe responsively (width and height) within its parent container. It also bypasses the usual cross-domain issues.

Fix using Jquery:


var $iframes = $( "iframe" );
// Find and save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width and height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container's width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();
Continue Reading

How do we use variables and mixins in SASS?

Variables are used to store the properties and we can reuse those properties multiple times throughout the project.

Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. So this approach will reduce the number of lines rapidly.

PFB codes for Sample use of variables


// Color codes
$DarkGrey2: #323232;
$Greyblue: #708090;

// Spacing
$spacingXS: 1rem; //10px
$spacingS: 2rem; //20px

// Typography
$roboto-light: Roboto Light;
$roboto-bold: Roboto Bold;

// Image Path
$imgURL: '../../images/app';

PFB codes for sample use of mixin


// Create mixins for position
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  bottom: $bottom;
  left: $left;
  top: $top;
  right: $right;
}

// create mixins for font style
@mixin font-style($fontFamily, $fontSize) {
    font-family: $fontFamily;
    font-size: $fontSize;
}

// integrating mixin into particular class
.wrapper{
   @inlcude position(relative, 10px, 20px);
   @include font-style(Roboto Regular, 16px);
}
Continue Reading

How to apply styling to placeholder text?

Formatting placeholder text using CSS

We should use browser prefix CSS for achieving cross browser compatibility.

CSS


/* 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;
}

Demo

See the Pen Apply styling to input placeholder text by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

How to Prevent bootstrap modal closing when clicking outside?

Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS

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

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;
}
}

Demo

See the Pen Prevent the Bootstrap Modal Closing when Clicking Outside the modal by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

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

Apply transparent background to element, but not the inside text content.

Apply CSS opacity (transparent) to the background only

To overcome this issue, We have to use rgba value property for parent element.

Syntax
background: rgba(red, green, blue, alpha value(opacity));

CSS


  .demo{
   background: rgba(81, 91, 162, 0.8); 
 }

Demo

See the Pen Apply CSS opacity (transparent) to the background only by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Compatibility issue in IE:

Opacity property is not supported in IE older version browsers. We can use CSS3 PIE approach to overcome this cross browser issue.

Continue Reading