Documents

Title
fancyBox #2. media lightbox
Description
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Category
Lightbox
Library
fancyBox
jQuery
Include Files
<!-- Add jQuery and fancyBox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
Basic markup

        <script>
            $(function () {
                $(".gallery").fancybox({
                    option
                });
            });
        </script>
        <a href="image.jpg" data-fancybox data-caption="My caption">
	        <img src="thumbnail.jpg" alt="" />
        </a>    
    
Attachment Table

fancyBox Options

PropertyTypeDefaultDescription
loopBooleanfalseEnable infinite gallery navigation
marginArray[44, 0]Space around image, ignored if zoomed-in or viewport width is smaller than 800px
gutterNumber50Horizontal space between slides
keyboardBooleantrueEnable keyboard navigation
arrowsBooleantrueShould display navigation arrows at the screen edges
infobarBooleantrueShould display infobar (counter and arrows at the top)
toolbarBooleantrueShould display toolbar (buttons at the top)
buttonsArray[
  'slideShow',
  'fullScreen',
  'thumbs',
  'share',
  //'download',
  //'zoom',
  'close'
]
What buttons should appear in the top right corner.
Buttons will be created using templates from `btnTpl` option and they will be placed into toolbar (class="fancybox-toolbar"` element)
idleTimeNumber3Detect "idle" time in seconds
smallBtnString'auto'Should display buttons at top right corner of the content
If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax'
Use template from `btnTpl.smallBtn` for customization
protectBooleanfalseDisable right-click and use simple image protection for images
modalBooleanfalseShortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
image
  └preloadString'auto'Wait for images to load before displaying
Requires predefined image dimensions
If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
ajax
  └settingsObject containing settings for ajax request
      └dataThis helps to indicate that request comes from the modal
Feel free to change naming
          └fancyboxBooleantrue
iframe
  └tplString'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>'Iframe template
  └preloadBooleantruePreload iframe before displaying it
This allows to calculate iframe content width and height
(note: Due to "Same Origin Policy", you can't get cross domain data).
  └cssCSS{}Custom CSS styling for iframe wrapping element
You can use this to set custom iframe dimensions
  └attrIframe tag attributes
      └scrollingString'auto'
defaultTypeString'image'Default content type if cannot be detected automatically
animationEffectString'zoom'Open/close animation type
false, 'zoom', 'fade', 'zoom-in-out'
animationDurationNumber500Duration in ms for open/close animation
zoomOpacityString'auto'Should image change opacity while zooming
If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
transitionEffectString'fade'Transition effect between slides
false, 'fade', 'slide', 'circular', 'tube', 'zoom-in-out', 'rotate'
transitionDurationNumber366Duration in ms for transition animation
slideClassString''Custom CSS class for slide element
baseClassString''Custom CSS class for layout
baseTplString'<div class="fancybox-container" role="dialog" tabindex="-1">' +
  '<div class="fancybox-bg"></div>' +
  '<div class="fancybox-inner">' +
    '<div class="fancybox-infobar">' +
      '<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>' +
    '</div>' +
    '<div class="fancybox-toolbar">{{buttons}}</div>' +
    '<div class="fancybox-navigation">{{arrows}}</div>' +
    '<div class="fancybox-stage"></div>' +
    '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
  '</div>' +
'</div>'
Base template for layout
spinnerTplString'<div class="fancybox-loading"></div>'Loading indicator template
errorTplString'<div class="fancybox-error"><p>{{ERROR}}<p></div>'Error message template
btnTpl
  └downloadString'<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' +
  '<svg viewBox="0 0 40 40">' +
    '<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' +
  '</svg>' +
'</a>'
  └zoomString'<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
  '<svg viewBox="0 0 40 40">' +
    '<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
  '</svg>' +
'</button>'
  └closeString'<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
  '<svg viewBox="0 0 40 40">' +
    '<path d="M10,10 L30,30 M30,10 L10,30" />' +
  '</svg>' +
'</button>'
  └smallBtnString'<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>'This small close button will be appended to your html/inline/ajax content by default,
if "smallBtn" option is not set to false
  └arrowLeftString'<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
  '<svg viewBox="0 0 40 40">' +
    '<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' +
  '</svg>' +
'</button>'
Arrows
  └arrowRightString'<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
  '<svg viewBox="0 0 40 40">' +
    '<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' +
  '</svg>' +
'</button>'
parentElString'body'Container is injected into this element
autoFocusBooleanfalseTry to focus on the first focusable element after opening
backFocusBooleantruePut focus back to active element after closing
trapFocusBooleantrueDo not let user to focus on element outside modal content
fullScreen
  └autoStartBooleanfalse
touchSet 'touch: false' to disable dragging/swiping
  └verticalBooleantrueAllow to drag content vertically
  └momentumBooleantrueContinue movement after releasing mouse/touch when panning
hashStringnullHash value when initializing manually, set `false` to disable hash change
media{}Customize or add new media types
Example:
media : {
  youtube : {
    params : {
      autoplay : 0
    }
  }
}
slideShow
  └autoStartBooleanfalse
  └speedNumber4000
thumbs
  └autoStartBooleanfalseDisplay thumbnails on opening
  └hideOnCloseBooleantrueHide thumbnail grid when closing animation starts
  └parentElString'.fancybox-container'Container is injected into this element
  └axisString'y'Vertical (y) or horizontal (x) scrolling
wheelString'auto'Use mousewheel to navigate gallery
If 'auto' - enabled for images only
onInitfunction$.noopWhen instance has been initialized
beforeLoadfunction$.noopBefore the content of a slide is being loaded
afterLoadfunction$.noopWhen the content of a slide is done loading
beforeShowfunction$.noopBefore open animation starts
afterShowfunction$.noopWhen content is done loading and animating
beforeClosefunction$.noopBefore the instance attempts to close. Return false to cancel the close.
afterClosefunction$.noopAfter instance has been closed
onActivatefunction$.noopWhen instance is brought to front
onDeactivatefunction$.noopWhen other instance has been activated
mobile
  └idleTimeBooleanfalse
  └marginNumber0
  └clickContentfunctionfunction( current, event ) {
  return current.type === 'image' ? 'toggleControls' : false;
}
  └clickSlidefunctionfunction( current, event ) {
  return current.type === 'image' ? 'toggleControls' : 'close';
}
  └dblclickContentfunctionfunction( current, event ) {  return current.type === 'image' ? 'zoom' : false;
}
  └dblclickSlidefunctionfunction( current, event ) {
  return current.type === 'image' ? 'zoom' : false;
}
Related

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and fancyBox -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
    <title>fancyBox #2. media lightbox</title>
    <style>   
        .gallery{
            transition: .25s;
            text-decoration: none;
        }
        .gallery:hover{
            opacity: .7;
        }
        /* [5] Inline HTML Content */
        #inline-content{
            display: none;
            width: 75vw;
            height: 75vh;
            padding: 20px 50px;
            color: #fff;
            background: #1392e1;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">fancyBox <small>#2. media lightbox</small></h1>
        <p class="dlw-description">fancyBox is jQuery lightbox plugin.<br>
            Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] YouTube</h2>
        <p>Get thumbnails using YouTube API.</p>
        <script>
            $(function () {
                $(".youtube").fancybox();
            });
        </script>
        <a href="https://www.youtube.com/watch?v=PQWeWmKB_II" class="youtube gallery" data-fancybox="youtube" data-caption="Webb Space Telescope Update on This Week @NASA – January 12, 2018">
            <img src="http://i.ytimg.com/vi/PQWeWmKB_II/mqdefault.jpg" />
        </a>
        <a href="https://www.youtube.com/watch?v=ZdJYKRg99Pw" class="youtube gallery" data-fancybox="youtube" data-caption="Exclusive: Deep-Sea Sharks and More Spotted by New Camera | National Geographic">
            <img src="http://i.ytimg.com/vi/ZdJYKRg99Pw/mqdefault.jpg" />
        </a>
        <a href="https://www.youtube.com/watch?v=9bQNRVyI4I0" class="youtube gallery" data-fancybox="youtube" data-caption="Life on the African Savanna">
            <img src="http://i.ytimg.com/vi/9bQNRVyI4I0/mqdefault.jpg" />
        </a>
        <a href="https://www.youtube.com/watch?v=zqE-ultsWt0" class="youtube gallery" data-fancybox="youtube" data-caption="BFR | Earth to Earth">
            <img src="http://i.ytimg.com/vi/zqE-ultsWt0/mqdefault.jpg" />
        </a>         
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Vimeo</h2>
        <p>Get thumbnails using Vimeo API. (» <a href="https://deponewd.github.io/video/" target="_blank">Get Thumbnail of a Video</a>)</p>
        <script>
            $(function () {
                $(".vimeo").fancybox();
            });
        </script>        
        <a href="https://vimeo.com/146746746" class="vimeo gallery" data-fancybox="vimeo" data-caption="I did some tests that finally led me to this video :)">
            <img src="https://i.vimeocdn.com/video/545221302_200x150.jpg" />
        </a>
        <a href="https://vimeo.com/39945517" class="vimeo gallery" data-fancybox="vimeo" data-caption="Short movie directed in my 4th year at Supinfocom during 6 months.">
            <img src="https://i.vimeocdn.com/video/275804862_200x150.jpg" />
        </a>
        <a href="https://vimeo.com/97428427" class="vimeo gallery" data-fancybox="vimeo" data-caption="A giant blue man driven by headless chickens through the path of life. Un géant bleu conduit par des poulets sans tête sur le chemin de la vie.">
            <img src="https://i.vimeocdn.com/video/477875418_200x150.jpg" />
        </a>
        <a href="https://vimeo.com/80547152" class="vimeo gallery" data-fancybox="vimeo" data-caption="The first time a platypus ever went to space !">
            <img src="https://i.vimeocdn.com/video/456500119_200x150.jpg" />
        </a>     
    </section>     
    <section>
        <h2 class="dlw-subtitle">[3] Instagram</h2>
        <p>Get thumbnails using Instagram API.</p>
        <script>
            $(function () {
                $(".instagram").fancybox();
            });
        </script>        
        <a href="https://www.instagram.com/p/BdN_zZCHWkC" class="instagram gallery" data-fancybox="instagram" data-caption="What did the astronauts on the International Space Station (@ISS) see when they looked upon the Earth from orbit in 2017? Swipe to see some of the top Earth observations from the year, as chosen by our Earth Science and Remote Sensing Unit at the Johnson Space Center (@NASAJohnson) in Houston.">
            <img src="https://www.instagram.com/p/BdN_zZCHWkC/media/?size=t" />
        </a>
        <a href="https://www.instagram.com/p/BdX-92cncJh" class="instagram gallery" data-fancybox="instagram" data-caption="Happy New Year’s Eve! A lunar event will greet us all in the New Year. Tomorrow, January 1, the full Moon will be at or near its closest point in its orbit around Earth, making it a supermoon. ">
            <img src="https://www.instagram.com/p/BdX-92cncJh/media/?size=t" />
        </a>
        <a href="https://www.instagram.com/p/BaWiTv5HGpa" class="instagram gallery" data-fancybox="instagram" data-caption="I’ve got sunshine….on a spacewalking day! During this month’s second of three spacewalks, NASA astronauts Randy Bresnik (@AstroKomrade) and Mark Vande Hei were welcomed with a beautiful sunrise. Bresnik posted this image to his social accounts saying, “A glorious sunrise greeted [astronaut Mark Vande Hei] and I at the start of our 2nd #spacewalk.">
            <img src="https://www.instagram.com/p/BaWiTv5HGpa/media/?size=t" />
        </a>
        <a href="https://www.instagram.com/p/BYGoqoHBnEK" class="instagram gallery" data-fancybox="instagram" data-caption="Total(lit)y awesome! This beautiful image depicts a total solar eclipse that was seen on Monday, August 21, 2017 above Madras, Oregon.">
            <img src="https://www.instagram.com/p/BYGoqoHBnEK/media/?size=t" />
        </a>        
    </section>             
    <section>
        <h2 class="dlw-subtitle">[4] Google Map</h2>
        <script>
            $(function () {
                $(".googlemap").fancybox();
            });
        </script>
        <a href="https://www.google.com/maps/place/Washington,+DC,+USA/@38.8935754,-77.0847872,12z/data=!3m1!4b1!4m5!3m4!1s0x89b7c6de5af6e45b:0xc2524522d4885d2a!8m2!3d38.9071923!4d-77.0368707" class="googlemap" data-fancybox data-caption="Washington District of Columbia, USA">
            Washington District of Columbia, USA 
        </a>                                                                       
    </section>    
    <section>
        <h2 class="dlw-subtitle">[5] Inline HTML Content</h2>
        <p>Need to add "display: none;" for this content.</p>
        <script>
            $(function () {
                $(".inline").fancybox();
            });
        </script>        
        <a href="javascript:;" data-src="#inline-content" class="inline" data-fancybox>
            Inline HTML Content
        </a>
        <div id="inline-content" class="box">
            <h1>fancyBox is jQuery lightbox plugin</h1>
            <p>Need to add "display: none;" for this content.</p>
        </div>               
    </section>  
    <section>
        <h2 class="dlw-subtitle">[6] iframe</h2>
        <script>
            $(function () {
                $(".iframe").fancybox({
                    iframe:{
                        css:{
                            // Default » width: 80%, height: 80%
                            width: '640px',
                            height: '480px'
                        }
                    }
                });
            });
        </script>        
        <a href="javascript:;" data-type="iframe" data-src="https://fancyapps.com/fancybox/3/" class="iframe" data-fancybox>
            iframe
        </a>      
    </section>                  
    ;
</body>
</html>

Comment

Search

Style Design
Text Style DesignCSS

Here, design samples of various effects to text are posted.

Headline (Heading) Style DesignCSS

The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.

OL (Ordered List) Style DesignCSS

The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.

HR (Separator Line) Style DesignCSS

The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.

Box Shadow Style DesignCSS

The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout
How to specify a breakpoint and switch imagesJS

Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.

Grid LayoutCSS

Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.

FlexCSS

Flex is the value of the CSS display property.

Link & Button
Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Button.cssCSS

Button.css is collection of CSS3 button animations.

Card
Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Text
Arctext.jsjQuery

Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.

Lettering.jsjQuery

Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

FitText.jsjQuery

FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media
FeedEkjQuery

FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.

YouTube Embed

Introduction of various embedment methods of YouTube.

FitVids.jsjQuery

FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.

xZoomjQuery

xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.

Instagram.cssCSS

Instagram.css is a stylesheet set that filters photos like instagram.

Date
Moment.jsJS

Moment.js is a javascript that processes and displays date and time.

Bootstrap Material DatePickerjQuery

Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table
MultifilterjQuery

Multifilter is jQuery Table Filtering Plugin.

Flex TableCSS

Responsive table using "display: flex;".
Not supported for rowspan.

Grid TableCSS

Responsive table using "display: grid;".
Not supported for rowspan.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Form
jQuery Mask PluginjQuery

jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.

Select2 #1. Basic SettingjQuery

Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.

jQuery SearcherjQuery

jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

FlexSlider #1. Single SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.

FlexSlider #2. Carousel SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.

slick #1. Single SliderjQuery

slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.

slick #2. Carousel SliderjQuery

slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox
fancyBox #1. basic image lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.

fancyBox #2. media lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.

Magnific Popup #1. basic image lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.

Magnific Popup #2. media lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.

Magnific Popup #3. CSS3-based animation effectsjQuery

Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

GreedyNavjQuery

GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.

GridTabjQuery

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

jQuery.NiceScrolljQuery

jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.

metisMenujQuery

metisMenu is a jQuery plugin that expands vertical and vertical menus.

fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

Offside.js #1. Basic Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.

Offside.js #2. Multiple Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.

Filterizr #1. Basic FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.

Filterizr #2. Advanced FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

ScrollajQuery

Scrolla is jQuery scroll animation plugin.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Animate.cssCSS

Animate.css is a style-sheet collection of animation effects.

jQuery Easing PluginjQuery

jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background
fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

jquery.mb.YTPlayerjQuery

jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip
Hint.cssCSS

Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.

ProtipjQuery

Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social
Framework
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Cheat Sheet
HTML5 Cheat Sheet

HTML5 Cheat Sheet by Make A Website Hub

CSS3 Cheat Sheet

CSS3 Cheat Sheet by Smashing Magazine

Visual Studio Code Keyboard Shortcuts

This is the Visual Studio Code default keyboard shortcut list.

GreenSock Cheat Sheet

Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other
Google Search

On this page you can search for codes collectively.

Design News

It is a news feed about design.