Presentational Attributes vs Inline Styles

Presentational Attributes

Presentational Attributes works almost like inline styles but there is striking difference between them. It is advisable to use them specifically on SVGs and IMG tags. Presentational attributes are very easy to override and inline styles can only be override with !important keyword in CSS. Presentational Attributes <img src="path/to/image.jpg" width="450" height="350" /> OR <table width="100%"> <tr> <td>Some text</td> </tr> </table> The presentational attributes on the <img /> can be override easily with CSS like below: /* The style below will override the Presentational Attributes

Continue Reading

Flexible SASS @mixin for each viewport (Breakpoint)

In my previous post, I have mentioned few useful tips on @mixin for SASS. In this post I have improvise SASS @mixin for the Breakpoint. I have updated the @mixin for the breakpoint to include any last minute changes to target any width/viewport just by entering the pixel width at the time of @include. In one of my recent project I was working on last minute changes to fix issue on odd viewport. Breakpoint @mixin from previous post was not flexible enough. So I tried

Continue Reading

The Ultimate Cheat-Sheet On Mixin – SASS

Using SASS (SCSS) gives you power to use features which are not available in CSS yet. SASS makes the CSS easy and enjoyable. SASS is nothing but a re-usable code which we will have to compile before publishing it to production/ live. We can declare variables, functions, etc… we can also do nesting. My favourite feature is MIXIN. We can define mixins in the settings file and include it in other .scss files to use the mixins defined in the file.

Continue Reading

Align Content Vertically Center with CSS

We know text-align: center & margin: 0 auto to have the text or content block to put horizontally center. But many time we come across a situation where we need to align the whole content vertically center. With CSS3 in action we can achieve things which were not possible before. In CSS3, we have transform property which helps us to put the content vertically center. div { position: relative; top: 50%; transform: translateY(-50%); } First, we are keeping he value at 50% height from the start

Continue Reading

PureCSS – A Modular CSS Foundation

PureCSS – A set of small, responsive CSS modules that you can use in every web project. – PureCSS.io In my recent project, I came across a new CSS framework PureCSS. Previously, I worked with Bootstrap, so I was comfortable with grid classes and all. Bootstrap comes with whole lot of other styles which I might not use at all. So in a way it increases CSS file length and size. But it is not the case with PureCSS. PureCSS is very

Continue Reading