From fd4cc64f1305dfe9525789efa51a8a694c2a0120 Mon Sep 17 00:00:00 2001 From: Matthieu Sadouni Date: Thu, 25 Oct 2012 18:19:19 +0200 Subject: [PATCH] rename the mixin to `responsive-embed` --- README.md | 8 +++++--- .../compass-responsive-embeds/_responsive-embeds.scss | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e63ea42..feaf530 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ This extension helps embedding videos and iframes in responsive designs. +It provides a `responsive-embed` mixin to apply on an element containing an embed, to scale it while keeping its ratio. + See the blogs posts from [Anders M. Andersen](http://amobil.se/2011/11/responsive-embeds/) and [A List Apart](http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/) for more information. ## Installation @@ -43,17 +45,17 @@ In your stylesheet: // 16/9 embed .embed-16-9 { - @include embed-container(16/9); + @include responsive-embed(16/9); } // 4/3 embed .embed-4-3 { - @include embed-container(4/3); + @include responsive-embed(4/3); } // default 1 ratio for a square embed @embed-1-1 { - @include embed-container; + @include responsive-embed; } You can use any ratio, as long as the result can be converted to percentages. diff --git a/stylesheets/compass-responsive-embeds/_responsive-embeds.scss b/stylesheets/compass-responsive-embeds/_responsive-embeds.scss index d74cc1a..2ef1a98 100644 --- a/stylesheets/compass-responsive-embeds/_responsive-embeds.scss +++ b/stylesheets/compass-responsive-embeds/_responsive-embeds.scss @@ -4,7 +4,7 @@ $responsive-embeds-default-ratio : 1 !default; // Mixin // // $ratio : any valid ratio like 16/9, 4/3... -@mixin embed-container( +@mixin responsive-embed( $ratio : $responsive-embeds-default-ratio ) { position: relative;