Best responsive CSS framework so far

There are a lot of CSS frameworks that use a grid system to display content on mobile and desktop(eg.: Bootstrap, Foundation…) but why load a lot of styles that you don’t need on your project? For example a series of form styles when you only need a simple Material Design form?

Lately I discovered Simple Grid, a simple, minimalistic responsive css framework that delivers only the basic functions of the grid.

You can take a look here: http://simplegrid.io/

Delayed color transition on .class:hover (button/link)

Sometimes you just want to add a beautiful delayed transition to your form button or menu links, this one works only on the desktop version/no mobile experience is seen…

CSS/form input with width: 100% goes outside parent’s bound

There is a pretty simple solution for this problem:

(Method of specifying whether or not an element’s borders and padding should be included in size units)

Responsive background image in card-header (Bootstrap 4)

UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.

This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel class with the card class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo.

Here is the live demo.

Viewport-percentage lengths: the vw, vh, vmin, vmax units

Excerpt from w3.org:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

When I design a new layout, I’ll keep in mind this option because it’s pretty handy if we think in terms of responsive design.

vw unit: Equal to 1% of the width of the initial containing block.
vh unit: Equal to 1% of the height of the initial containing block.
vmin unit: Equal to the smaller of vw or vh.
vmax unit: Equal to the larger of vw or vh.

Here is my CSS:

Here is the HTML code:

Try it Yourself / Demo

Responsive background image in panel heading (Bootstrap)

Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.

The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.

Here is the CSS:

HTML code:

I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.

Take a look at the results here.

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.

Try it Yourself / Demo

You can alter the fadeIn() and fadeOut() or change them to other jQuery effect.

Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.

CSS Image Sprites Example and How To Use Them

In this example I will show you how you can use only one image for your social media sharing nav-bar. Most of us use this sharing buttons-nav-bar so that our users can share our articles and content to their social media profiles.
Using this style of implementation can bring a few benefits to our user experience – if you are using this on a popular website with lots of requests – the css image sprite can lower your server requests so, instead of having 6 requests for every logo that we use in our example, we use just one request and we use CSS to display each image in a separate place on our page.

Instead of using three separate images, we use this single image ("sprite.png")

Youtube is just one of the heavily trafficked sites on the internet that uses sprites using one image to display all kinds of small images used in different places on the site:

CSS Image Sprites

HTML

Try it Yourself / Demo