Magazine Framework V.2

Overview:

Magazine is a slim framework primarily designed for tablets and desktop as either a multipage or single page website. The JS and CSS has been optimized to support audio, video, menus, smooth scrolling, image light boxes, video backgrounds and parallax effects without all the overhead created by including additional script and style libraries. Below are list of features included with this framework.

Updates:

17/03/17 - Added new scalable modal videos funcrtionality and design
17/04/24 - Adjusted padding for tablet and mobile devices.
17/05/04 - Added Accordions
17/05/04 - Replaced font Awesome with Google Material Icons
17/05/04 - iframe correctly empties when closing YouTube, Vimeo, Wistia, or any other iframe based videos
17/05/04 - Removed default YouTube video from iframe.

Features:

  • Fully Responsive
  • Support for iframe and video lightboxes
  • Video Backgrounds
  • Image Lightboxes
  • Supports MP4 and MP3
  • Smooth Scrolling
  • Mininal audio player format
  • Light and dark themes available
  • Dynamically loading iframe, audio and video
  • Lightweight JS, and CSS
  • Sidr style menu
  • Prohibitive scrolling during lightbox events
  • Lightweight Parallax optimized for iOS
  • Scalable H1, and H2 fonts

Parallax Cover

Audio Samples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Pellentesque ornare justo non orci aliquet ullamcorper. Nullam consectetur lacus mauris, pellentesque hendrerit dolor hendrerit eget. Nulla non finibus mi, ac dignissim elit. Proin semper bibendum ipsum, non dignissim arcu feugiat sit amet. Vestibulum porta nunc urna, ac mattis quam sodales ut.

Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Play Audio One volume_up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Pellentesque ornare justo non orci aliquet ullamcorper. Nullam consectetur lacus mauris, pellentesque hendrerit dolor hendrerit eget. Nulla non finibus mi, ac dignissim elit. Proin semper bibendum ipsum, non dignissim arcu feugiat sit amet. Vestibulum porta nunc urna, ac mattis quam sodales ut.

Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Play Audio Two volume_up

Video Samples

Movie Title

MPEG4 HTML5 Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Movie Title

YouTube Video Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Parallax Half Height Cover

Basic Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Main Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Main Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Section Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Section Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Video Information

Lipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Accordion

keyboard_arrow_downkeyboard_arrow_upAccordion 1

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.

keyboard_arrow_downkeyboard_arrow_upAccordion 2

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.

keyboard_arrow_downkeyboard_arrow_upAccordion 3

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.

Sample Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet risus vel diam dictum convallis. Integer et nulla venenatis, malesuada metus sed, vestibulum justo. Praesent faucibus justo eu mi varius, a iaculis sapien elementum. Suspendisse ut porttitor orci. Nam vitae tincidunt sem. Sed eget elementum velit. Ut sit amet rhoncus leo. Donec lobortis dictum risus, et rhoncus dui posuere sed. Maecenas id fringilla lectus. Nullam vitae leo auctor, luctus mi a, tempor elit. Cras porttitor at velit ac pharetra. Sed lacinia sollicitudin pharetra. Nullam fringilla libero in libero viverra commodo. Fusce eget porta magna. Nulla porttitor, urna eu posuere cursus, ligula augue facilisis augue, id aliquet felis dolor id nunc. Phasellus quis ultricies libero, ac mollis nibh. In interdum commodo sollicitudin.

Section One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Section Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

Section Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra lorem eu lacus efficitur, vel auctor felis maximus. Donec sed auctor ante. Suspendisse pulvinar malesuada mauris vel dignissim. Sed porta magna sit amet felis cursus tristique. Aliquam erat volutpat. Cras tincidunt vulputate erat, non pharetra justo tempor sed. Suspendisse consequat aliquet est sed maximus. Fusce vitae posuere urna.

close
volume_up
menu