foundation-textmedia v1.1.3
Text & Media for Foundation for Sites
Requirements
Installation
bower install foundation-textmedia
Usage
Import foundation-textmedia.sass to your Sass preprocessing chain after the import of Foundation for Sites Version 6.4.x.
Example from demo.sass
:
@import foundation
@import foundation-textmedia
If you want to use the compiled css files for your project (including Foundation) use a copy of
demo.css
or demo.min.css
.
Settings
You can set or override the default textmedia settings defined in foundation-textmedia.sass. For details see the comments in that file.
Demo
http://tan3.github.io/foundation-textmedia
Options
Media position: The media item(s) can be placed at different positions around the text.
- Above
media--above
- Below
media--below
- Beside
media--beside
- Intext
media--intext
Media alignment: Additional to the position option you can align the media.
- Left (Default)
- Center
media--center
(only for positions: Above, Below) - Right
media--right
Media columns:
Add multiple media columns to the textmedia element. Define the columns for the media items
with the data-media-columns
attribute on the media__item
element.
Media columns override:
Override the columns for an media item with the data-media-columns-override
attribute on
the media__column
element.
Video:
Embed a Vimeo or YouTube video with the
media__video
element. Use the variant media__video--widescreen
for a video with
a widescreen format.
fancyBox license
In the demo fancyBox is used to show media items in a lightbox. Do not forget to purchase a fancyBox license for the use on commercial websites.
Development
Requirements
Initialize project
bower install
npm install
Gulp tasks
Start Browsersync and watch .sass
and .html
file changes.
gulp
Copy assets from bower components and update the stylesheet file for the demo site.
gulp build