cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Posts tagged responsive

How to Create a cross browser favicon for your HTML5 website

Creating a cross browser favicon for your HTML5 website

You need 14 lines of HTML if you want a favicon that works across devices and all resolutions. 40% of the most visited websites have no...

Adventures in BEM and Responsive with SASS

Objective

I've been trying to wrap my head around how to apply BEM and the pros and cons of using it (or something like it). For those of you that are unfamiliar, BEM (stands for Block Element...

In Search of the Perfect Tab

First off big thanks to Chris Coyer for posts like: Functional CSS Tabs Revisited. I read a ton of articles figuring this out, so if I forgot to credit someone, then here's a thumbs up to you!

...

Responsiveness Procrastination?

dvdpila responsiveness screeny' class="post-image

In a previous post I mentioned that the next step for DVD Pila! is to start marketing it. Well that was going to be the next step until I started...

IE7, Media Queries and Mobile First Design

Ok, so, disclaimer: I have no idea if this is best practice, and I'm sure someone smart will point out problems with it, but I just stumbled across this and thought it was a cool little hack.

...

Changing Behaviour With Media Queries...

... and a little JS

Recently I found myself with a conundrum. I'm in the process of a major overhaul of our company site, turning the old (IE6 compatable) markup into swanky new responsive...

Detect if an element is within the viewport

This is an awesome little plugin to detect if an element is outside the viewport. This example uses it to prevent a dropdown menu from hanging off the right side of the viewport.

[[[pen...

A pure-CSS solution to equal height columns

Uses pseudo-elements to achieve the effect of equal column heights among floated elements.

Pure CSS Equal Column Heights

Credit: TutsPlus

aTmpl · Адаптивный сайт

Адаптивный дизайн · Адаптивные шаблоны

Мы создаём собственные элементы адаптивного дизайна, а так же демонстрируем лучшие работы сторонних разработчиков.
Разрабатываем адаптивные шаблоны для сайтов и...

responsive html5 video using video-js

responsive html5 video using video-js

This is a simple example of how to implement Video in your static project by leveraging the fantastic open source video-js. I have a few versions floating...

Ambient make use of HTML5 sections & outlines for semantic scaffolding and CSS3 attributes on elements for page layout.

Sometimes I have UI that plays well with a traditional grid paradigm but sometimes I need a more complex grid. This can mean learning grid classes for structure with floats, columns and media...

Introducing Flexbox Fridays

Flexbox Friday logo consisting of each letter in its own dark blue square block

Flexbox is everywhere right now. Well, talk of flexbox is everywhere, not so much its implementation just yet. We have...

Mobile Meta & CSS Helpers

Meta Tag

When setting up your responsive websites, take advantage of the responsive meta tag to ensure your content adapts to the device view-port size.

  <meta name="viewport"...

Rainyday customized !

Err... Well.. Let's talk about slippin Jimmy ;)

I wanted a hand door for my house with the date and time on it, hehe it's done !

testing moving css div with php time and icons

More...

Finding all Perfect Responsive Multi-level Dropdown CSS Menus

Finding all Perfect Responsive Multi-level Dropdown CSS Menus

[Full list by Myke Black (@mykeblack), Update 26th Feb 2015]

The WINNER is Smart Menus - Describes itself as 'possibly the most advanced...

Optimizing CSS animations

Optimizing CSS animations

Animating well is core to a great web experience. You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and...

EnvisionUS.com Released

We did it!

After months of blueprinting, information architecture, stakeholder interviews, design, front end, and development...

A CSS3 Responsive Grid you can Use Today

Alternate Titles: Why CSS3 Selectors are Awesome or Counting Elements in CSS3 or Faking Flexbox or CSS3 witchcraft

Intro

CSS3 selectors are just plain awesome. With the new selectors and a little...

Think big with vh and vw

These underutilized properties allow you to scale elements in proportion to the viewport.


What do vh and vw measure?

vh - measures the viewport height

vw - measures the viewport width

...

Responsive Sass grids without the bloat

I’m going to make an assumption right off the bat. You’ve used a framework’s grid before. Be it Bootstrap, Semantic-UI, Foundation…whatever the case may be. Have you ever needed to go in and remove...

Making Adobe Edge Animations responsive

Making Adobe Edge Animations responsive

This will show you how to make your Adobe Edge animations responsive to the parent container.

set scaleToFit to "width"

set bScaleToParent to true

For...

Sycamore Tussock Moth Grid

Sycamore Tussock Moth Grid

Hey There!

You've likely come across this post wondering what the heck a sycamore tussock moth is. I'll tell you; it's a moth....

iOS 9 Will Separate "Responsive" from Responsive

It’s widely accepted that truly responsive design has breakpoints that fit the site content not the device. However, there are still sites and frameworks that use device-focused breakpoints to...

Element Queries for CSS

Element Queries are a new way of writing CSS styles so the rules apply to individual elements on the page, instead of to the whole page as one document like in regular CSS.

Element Queries can be...

Don't be Afraid of the Picture Element

Images have a huge impact on a website's performance, simply due to their file size and type. Thankfully, today, we have ways to deliver the best option to users. When we stop and think about...

Accessible, Simple, CSS-first Responsive Tables

Content and Comparison tables

There are many types of tables on websites where content can vary as wildly as the approaches used to make them responsive. The tables I find most frustrating are...

Codepen is beautiful

Louis" title="Louis" width="200" height="248

Codepen is truly beautiful website. So many good resources to find here. Thanks much to the author of the website. I am recommending it to my friends...

FONT-SIZE PER VIEWPORT

In einigen Projekten möchte ich, dass sich die Schriftgröße sowie die Schriftfarbe ab einem bestimmten Viewport ändert.

In folgendem Beispiel ist die Schriftfarbe bis 800px schwarz (#000000) und die...

Responsive tables, mobile first and no JS

I was challenged by a client project to build properly responsive tables - that is, tables that had a fairly different design when running mobile than desktop, but remaining smoothly adaptive. And...

Better Responsive Breakpoints Naming

Introduction

With the rise of responsive web design and CSS preprocessors, the breakpoints were generally named phone tablet desktop to easily differenciate the devices on which the design responded...

Responsive Scrollable HTML & CSS tables with footer

I wanted to put a lot of data on a single web page, so a table naturally came to mind. I wanted the page to remain relatively short, so I thought 'scrollable'. I wanted a fixed header for...

Creating Angles With Clip-Path and Transforms

For the last year and a half, I've done most of the front end development for DukeHealth.org. Much of the recent design has included angles in between sections to create a visual progression...

Number Clamps in JavaScript

Lately I've been playing with number clamps, and I've found a few different ways to express the same behavior in JavaScript.

The idea of a number clamp is that if you're using a number...

A Very Simple CSS Grid

I learned Bootstrap earlier this year for a few projects. Mostly because I wanted to use its grid system and template navbar for a few things. And while it did allow me to quickly cut & paste...

A Very Simple HTML/CSS Navbar

When working with Bootstrap, I dabbled with their template navbar to try and speed up my process. While it did give me an immediate navbar, there was so much extra stuff in it I always had to...

A React Navbar Component

I use React a lot, and I use navbars a lot, so this was just an obvious one for me. This is nothing extravagant. I'm not using React Router in this example, just some <a> tags. But it is...

Center Responsive Homothetic Block (Without flex-box)

Simple as possible (snippet series).

Center Responsive Homothetic Block Without flex-box.

This is the simplest solution I've found to center an homothetic block (geometrically similar) in a page....

PCRS - Pure CSS Responsive Slider

Intro:

I have seen this request again and again over time where people were trying hard to come up with a simple yet elegant slider that utilizes CSS3 and does not require any javascript or jquery...

Smooth Fluid Responsiveness

Have you ever wondered, how far you can go in responsive design?

Lots of people will tell me that it depends on what you can imagine and how far you can go in programming it. Websites are my Little...

Smart Grid Responsive

Make responsive applications simply

By Fred Rocha (2017/03/01)

Responsive Design Population

66% of the world's population makes use of some mobile device. Responsive design is essential to ensure...

Top Bar Responsive

Highlight important links with the top navigation bar

By Fred Rocha (2017/03/03)

Responsive Design

The top navigation bar is an efficient way to highlight useful links to the user. In its version...

UX problems (with solution) of Bootstrap modals on mobile phones

Stock Bootstrap modal behavior

Regular Bootstrap modals don’t look and feel like something native on mobile phones. They are basically the same windows from desktop version, only stretched properly...

Make A Youtube Video Responsive (The Easy Way)

Yesterday I was working on a product landing page as I work through the assignments for freeCodeCamp. One part of the assignment was to embed a product video. I embedded a video using the iframe...

Making a Flexbox Wrap at a Specific Place Responsively

While working on a product landing page as an assignment for freeCodeCamp, I was trying to figure out how to make my navigation bar resize responsively. When the screen was large I wanted the...

Responsive HTML Tables

If you have ever built a webpage that includes a wide HTML table, you have likely ran into the problem of how to make it display in a usable way on various common view port sizes. I have researched...

Thoughts on a Syntax for Element Queries

It's possible to think of Element Queries as a natural extension to CSS Media Queries. I would summarize the requirements for media queries like this:

a media type

query condition(s)

a stylesheet

...

ocultar elementos con bootstrap

.visible-phone: 767px para abajo

.visible-tablet: entre 979px to 768px

.visible-desktop: solo visible en desktop

.hidden-phone: oculto desde 767px para abajo, pero visible desde 768 para arriba

...