function persistTitle(hook, vm) { var titleElm = document.querySelector('title'); var rootTitle = titleElm && titleElm.textContent; var pageTitlePrefix = window.$docsify.name ? window.$docsify.name + ' - ' : ''; if (rootTitle) { hook.doneEach(function () { var currentTitle = titleElm.textContent; var isRoot = !/\/[a-z]/.test(location.hash); var newTitle = isRoot ? rootTitle : pageTitlePrefix + currentTitle; titleElm.textContent = newTitle; }); } } ] }; ``` -------------------------------- ### Apply Custom Themes with HTML and CSS Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates how to apply custom themes to device frames using HTML classes and define theme-specific CSS variables. This allows for flexible styling of the frame's appearance. ```html  <div class="app-frame mac custom scrolling" data-url="my-domain.com"> ... </div>  <figure class="app-frame win custom wireframe" data-title="Custom Wireframe"> ... </figure> ``` ```css .app-frame.custom { --bar-background: #475569; --border-color : #64748b; --button-color : #94a3b8; --color : #e2e8f0; --title-color : #cbd5e1; --url-background: var(--border-color); --url-color : #cbd5e1; } .app-frame.custom.wireframe { --background : none; --bar-background : none; --border-color : #94a3b8; --button-color : #94a3b8; --url-background : none; --url-border-width: 1px; border-style: dotted; } ``` -------------------------------- ### Wireframe Theme HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates the application of the wireframe theme in conjunction with macOS and Windows themes. This creates a skeletal, design-prototype look for the frame. ```html <div class="app-frame mac wireframe"></div> <div class="app-frame win wireframe"></div> ``` -------------------------------- ### HTML Structure for macOS Dark Theme with URL Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates a macOS dark theme frame that loads content from a specified URL. The `dark` class enables the dark theme, and `data-url` defines the content source. ```html <div class="app-frame dark mac" data-url="my-domain.com"></div> ``` -------------------------------- ### Basic Device Frame HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Provides the fundamental HTML structure for creating a generic device frame. This serves as the base for applying various themes and styles. ```html <div class="app-frame"></div> ``` -------------------------------- ### Initialize Google Analytics Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.html This JavaScript snippet initializes Google Analytics tracking for the website. It checks if the current hostname is not 'localhost' before proceeding. It defines the `dataLayer` and `gtag` function for sending analytics events. ```javascript if (location.hostname !== 'localhost') { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-81ZW8Q90GJ'); // cspell: disable-line } ``` -------------------------------- ### HTML: Display Web Content in Device Frames (macOS, Windows) Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML snippet demonstrates how to use the `app-frame` class to display web content within simulated macOS or Windows device frames. The `data-url` attribute can be used to specify a URL associated with the frame. ```html <div class="app-frame mac" data-url="my-domain.com"></div> <div class="app-frame win" data-url="my-domain.com"></div> <div class="app-frame mac centered" data-url="my-domain.com"></div> ``` -------------------------------- ### macOS and Windows Themes HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to apply macOS and Windows specific themes to the device frames using CSS classes. These themes alter the visual appearance to mimic the respective operating systems. ```html <div class="app-frame mac"></div> <div class="app-frame win"></div> ``` -------------------------------- ### Apply Device Frame with Themes - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Enhance the device frame by applying preset theme classes like 'mac', 'win', 'dark', or 'borderless' in addition to 'app-frame'. These classes modify the appearance of the frame, such as OS style or border visibility. ```html  <div class="app-frame mac dark"> Hello, World! </div>  <figure class="app-frame win borderless"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### Include css-device-frames via CDN Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Include the css-device-frames stylesheet directly into your HTML using a CDN link. This method is useful for quick prototyping or projects that do not use a build system. It's recommended to lock the version to prevent unexpected breaking changes. ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-device-frames@1/dist/device-frames.min.css"> ``` -------------------------------- ### Add Title or URL Bar - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Add a title or URL bar to the device frame by using 'data-title' or 'data-url' attributes on the 'app-frame' element. This allows for custom text overlays on the frame. ```html  <div class="app-frame mac dark" data-url="my-domain.com"> Hello, World! </div>  <figure class="app-frame win borderless" data-title="Borderless Image"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### HTML Structure for macOS Wireframe Theme Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to apply a wireframe style to a macOS device frame. The `wireframe` class is used in conjunction with theme and layout classes. The frame is placed within a `padded-light` div for visual spacing. ```html <div class="padded-light"> <div class="app-frame wireframe mac" data-url="my-domain.com"></div> </div> ``` -------------------------------- ### CSS Custom Properties for Theming Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.html This CSS snippet defines custom properties for theming. These properties, such as `--theme-hue`, `--theme-saturation`, and `--theme-lightness`, can be used to control the visual appearance of elements throughout the stylesheet. ```css :root { --theme-hue: 340; --theme-saturation: 82%; --theme-lightness: 52%; } ``` -------------------------------- ### Dark Mode Theme HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Illustrates how to activate the dark mode theme for device frames, applicable to both macOS and Windows themes, including combinations with the wireframe style. ```html <div class="app-frame mac dark"></div> <div class="app-frame win dark"></div> <div class="app-frame mac dark wireframe"></div> <div class="app-frame win dark wireframe"></div> ``` -------------------------------- ### Apply Device Frame - Basic HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Apply the 'app-frame' CSS class to any HTML element to create a basic device frame. This class is the primary modifier for enabling the frame styles. It should not be applied to replaced elements. ```html <div class="app-frame"> Hello, World! </div> <figure class="app-frame"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### HTML: Device Frame with Multi-Column/Row Content Layout Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML shows a device frame configured to use a custom grid layout (defined by CSS variables for columns and rows). It includes distinct divs for 'Left', 'Right', and 'Bottom' content areas, demonstrating a structured layout within the frame. ```html <div class="app-frame mac centered" data-title="Columns & Rows"> <div style="background: #f1f5f9;">Left</div> <div style="background: #e2e8f0;">Right</div> <div style="grid-column: 1/-1; background: #cbd5e1;">Bottom</div> </div> ``` -------------------------------- ### Include Stylesheet - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Link the CSS Device Frames stylesheet directly in your HTML file using a standard link tag. This is a common method for including external CSS resources. ```html <link rel="stylesheet" href="path/to/device-frames.css"> ``` -------------------------------- ### CSS: Basic Device Frame Styling Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This CSS defines the base styling for the `app-frame` class, setting it up as a grid container to center its content both vertically and horizontally. This is fundamental for most device frame layouts. ```css .app-frame { display: grid; align-items: center; justify-items: center; } ``` -------------------------------- ### Include Stylesheet - CSS Import Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Import the CSS Device Frames stylesheet into an existing CSS file using the @import rule. This method is useful for organizing styles within CSS files. ```css @import "path/to/device-frames.css"; ``` -------------------------------- ### CSS: Device Frame with Custom Grid Columns and Rows Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This CSS snippet shows how to customize the internal grid layout of a device frame using CSS variables `--grid-columns` and `--grid-rows`. This allows for complex arrangements of content within the frame, such as multiple columns and rows. ```css .app-frame { --grid-columns: 1fr 1fr; --grid-rows: 1fr auto; display: grid; align-items: stretch; min-height: 200px; text-align: center; } ``` -------------------------------- ### Device Frames with Titles HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to add a title to the device frame using the `data-title` attribute. This is demonstrated for both macOS and Windows themes, including a centered title variation. ```html <div class="app-frame mac" data-title="Title"></div> <div class="app-frame win" data-title="Title"></div> <div class="app-frame mac centered" data-title="Title"></div> ``` -------------------------------- ### Include Stylesheet - Sass/SCSS Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md In Sass 1.2.3+ environments, you can use the @use rule to include the CSS Device Frames stylesheet. This leverages Sass's module system for better dependency management. ```scss // Sass 1.2.3+ @use "node_modules/css-device-frames/dist/device-frames.css"; ``` -------------------------------- ### HTML: Scrolling Device Frame with Content Height Defined Externally Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML demonstrates a scrolling device frame where the height of the frame itself is explicitly set using inline styles (`height: 15em;`). The content inside the frame will then scroll to fit within this defined height. ```html  <div class="app-frame mac scrolling" style="height: 15em;"> <div> ... </div> </div> ``` -------------------------------- ### HTML: Scrolling Device Frame with Content Wrapper Height Defined Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML shows a scrolling device frame where the height is applied to an inner content wrapper div, rather than the frame itself. This allows the frame to adapt its own dimensions while the content within scrolls to fit the specified wrapper height. ```html <div class="app-frame mac scrolling">  <div style="height: 15em;"> ... </div> </div> ``` -------------------------------- ### Content Styling - Scrolling and Grid HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Style content within the device frame for scrolling or centering using the 'scrolling' class or CSS Grid. The 'scrolling' class enables vertical scrollbars for overflowing content, while Grid can be used for precise alignment. ```html  <div class="app-frame mac dark scrolling" data-url="my-domain.com"> <div style="height: 12em;"> <p style="margin-top: 0;">Look again at that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there--on a mote of dust suspended in a sunbeam.</p> <p>Carl Sagan - <em>Pale Blue Dot</em></p> </div> </div>  <figure class="app-frame win" data-title="Centered Content" style=" display: grid; align-items: center; justify-items: center; "> <span style="font-size: 3em;">🎯</span> </figure> ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.

### Install css-device-frames via NPM Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Install the css-device-frames package using npm. This is the standard way to add the library to your project for local development and build processes. ```bash npm install css-device-frames ``` -------------------------------- ### Clone and Run css-device-frames from Git Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Clone the project repository locally to build and develop the library. This includes cloning the repository, navigating into the directory, and starting the development server which typically includes building and watching for changes. ```bash # Clone repo git clone https://github.com/jhildenbiddle/css-device-frames.git # Change directory cd css-device-frames # Development (build & watch) npm start ``` -------------------------------- ### HTML Structure for Custom Windows Theme with URL Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md An example of a custom styled Windows theme frame, also loading content from a URL. The `custom` class allows for further styling overrides, combined with `win` and `data-url`. ```html

``` -------------------------------- ### HTML Structure for Windows Theme Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Example HTML structure for a Windows-themed application frame. Uses the `app-frame` class with `win` for the Windows theme. It can also include `data-title` for a caption. ```html

``` -------------------------------- ### HTML Structure for Custom Windows Wireframe Theme Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Illustrates a custom styled Windows wireframe theme. This example combines `custom`, `win`, and `wireframe` classes, along with a `data-url` and contained within a `padded-custom` div for background styling. ```html

``` -------------------------------- ### HTML Structure for macOS Theme Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Example HTML structure to create a macOS-themed application frame. The `app-frame` class is the base, with `mac` specifying the theme and `centered` for alignment. The `data-title` attribute sets the title displayed in the frame. ```html

``` -------------------------------- ### Borderless Device Frame with Content HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Provides examples of creating borderless device frames that can contain images, videos, or iframes. The `borderless` class removes the frame's border, allowing content to fill the space. ```html

``` -------------------------------- ### Docsify Configuration Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.html This JavaScript object configures the Docsify static site generator. It includes settings for the repository, homepage, sidebar, navigation, plugins, and search functionality. ```javascript window.$docsify = { // GENERAL // ----------------------------------------------------------------- name : 'CSS Device Frames', repo : 'https://github.com/jhildenbiddle/css-device-frames', homepage : 'index.md', loadSidebar: 'sidebar.md', // NAVIGATION // ----------------------------------------------------------------- alias: { './*?/changelog': 'https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/CHANGELOG.md' }, auto2top : true, maxLevel : 3, subMaxLevel: 3, // PLUGINS // ----------------------------------------------------------------- ethicalAds: { eaPublisher: 'jhildenbiddle-github-io' }, executeScript: true, search : { depth : 3, noData : 'No results!', placeholder: 'Search...' }, plugins: [ // Restores initial function persistTitle(hook, vm) { var titleElm = document.querySelector('title'); var rootTitle = titleElm && titleElm.textContent; var pageTitlePrefix = window.$docsify.name ? window.$docsify.name + ' - ' : ''; if (rootTitle) { hook.doneEach(function () { var currentTitle = titleElm.textContent; var isRoot = !/\/[a-z]/.test(location.hash); var newTitle = isRoot ? rootTitle : pageTitlePrefix + currentTitle; titleElm.textContent = newTitle; }); } } ] }; ``` -------------------------------- ### Apply Custom Themes with HTML and CSS Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates how to apply custom themes to device frames using HTML classes and define theme-specific CSS variables. This allows for flexible styling of the frame's appearance. ```html  <div class="app-frame mac custom scrolling" data-url="my-domain.com"> ... </div>  <figure class="app-frame win custom wireframe" data-title="Custom Wireframe"> ... </figure> ``` ```css .app-frame.custom { --bar-background: #475569; --border-color : #64748b; --button-color : #94a3b8; --color : #e2e8f0; --title-color : #cbd5e1; --url-background: var(--border-color); --url-color : #cbd5e1; } .app-frame.custom.wireframe { --background : none; --bar-background : none; --border-color : #94a3b8; --button-color : #94a3b8; --url-background : none; --url-border-width: 1px; border-style: dotted; } ``` -------------------------------- ### Wireframe Theme HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates the application of the wireframe theme in conjunction with macOS and Windows themes. This creates a skeletal, design-prototype look for the frame. ```html <div class="app-frame mac wireframe"></div> <div class="app-frame win wireframe"></div> ``` -------------------------------- ### HTML Structure for macOS Dark Theme with URL Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Demonstrates a macOS dark theme frame that loads content from a specified URL. The `dark` class enables the dark theme, and `data-url` defines the content source. ```html <div class="app-frame dark mac" data-url="my-domain.com"></div> ``` -------------------------------- ### Basic Device Frame HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Provides the fundamental HTML structure for creating a generic device frame. This serves as the base for applying various themes and styles. ```html <div class="app-frame"></div> ``` -------------------------------- ### Initialize Google Analytics Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.html This JavaScript snippet initializes Google Analytics tracking for the website. It checks if the current hostname is not 'localhost' before proceeding. It defines the `dataLayer` and `gtag` function for sending analytics events. ```javascript if (location.hostname !== 'localhost') { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-81ZW8Q90GJ'); // cspell: disable-line } ``` -------------------------------- ### HTML: Display Web Content in Device Frames (macOS, Windows) Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML snippet demonstrates how to use the `app-frame` class to display web content within simulated macOS or Windows device frames. The `data-url` attribute can be used to specify a URL associated with the frame. ```html <div class="app-frame mac" data-url="my-domain.com"></div> <div class="app-frame win" data-url="my-domain.com"></div> <div class="app-frame mac centered" data-url="my-domain.com"></div> ``` -------------------------------- ### macOS and Windows Themes HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to apply macOS and Windows specific themes to the device frames using CSS classes. These themes alter the visual appearance to mimic the respective operating systems. ```html <div class="app-frame mac"></div> <div class="app-frame win"></div> ``` -------------------------------- ### Apply Device Frame with Themes - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Enhance the device frame by applying preset theme classes like 'mac', 'win', 'dark', or 'borderless' in addition to 'app-frame'. These classes modify the appearance of the frame, such as OS style or border visibility. ```html  <div class="app-frame mac dark"> Hello, World! </div>  <figure class="app-frame win borderless"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### Include css-device-frames via CDN Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Include the css-device-frames stylesheet directly into your HTML using a CDN link. This method is useful for quick prototyping or projects that do not use a build system. It's recommended to lock the version to prevent unexpected breaking changes. ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-device-frames@1/dist/device-frames.min.css"> ``` -------------------------------- ### Add Title or URL Bar - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Add a title or URL bar to the device frame by using 'data-title' or 'data-url' attributes on the 'app-frame' element. This allows for custom text overlays on the frame. ```html  <div class="app-frame mac dark" data-url="my-domain.com"> Hello, World! </div>  <figure class="app-frame win borderless" data-title="Borderless Image"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### HTML Structure for macOS Wireframe Theme Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to apply a wireframe style to a macOS device frame. The `wireframe` class is used in conjunction with theme and layout classes. The frame is placed within a `padded-light` div for visual spacing. ```html <div class="padded-light"> <div class="app-frame wireframe mac" data-url="my-domain.com"></div> </div> ``` -------------------------------- ### CSS Custom Properties for Theming Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.html This CSS snippet defines custom properties for theming. These properties, such as `--theme-hue`, `--theme-saturation`, and `--theme-lightness`, can be used to control the visual appearance of elements throughout the stylesheet. ```css :root { --theme-hue: 340; --theme-saturation: 82%; --theme-lightness: 52%; } ``` -------------------------------- ### Dark Mode Theme HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Illustrates how to activate the dark mode theme for device frames, applicable to both macOS and Windows themes, including combinations with the wireframe style. ```html <div class="app-frame mac dark"></div> <div class="app-frame win dark"></div> <div class="app-frame mac dark wireframe"></div> <div class="app-frame win dark wireframe"></div> ``` -------------------------------- ### Apply Device Frame - Basic HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Apply the 'app-frame' CSS class to any HTML element to create a basic device frame. This class is the primary modifier for enabling the frame styles. It should not be applied to replaced elements. ```html <div class="app-frame"> Hello, World! </div> <figure class="app-frame"> <img src="assets/img/picture.svg" alt="Mountains and a sunny sky"> </figure> ``` -------------------------------- ### HTML: Device Frame with Multi-Column/Row Content Layout Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML shows a device frame configured to use a custom grid layout (defined by CSS variables for columns and rows). It includes distinct divs for 'Left', 'Right', and 'Bottom' content areas, demonstrating a structured layout within the frame. ```html <div class="app-frame mac centered" data-title="Columns & Rows"> <div style="background: #f1f5f9;">Left</div> <div style="background: #e2e8f0;">Right</div> <div style="grid-column: 1/-1; background: #cbd5e1;">Bottom</div> </div> ``` -------------------------------- ### Include Stylesheet - HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Link the CSS Device Frames stylesheet directly in your HTML file using a standard link tag. This is a common method for including external CSS resources. ```html <link rel="stylesheet" href="path/to/device-frames.css"> ``` -------------------------------- ### CSS: Basic Device Frame Styling Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This CSS defines the base styling for the `app-frame` class, setting it up as a grid container to center its content both vertically and horizontally. This is fundamental for most device frame layouts. ```css .app-frame { display: grid; align-items: center; justify-items: center; } ``` -------------------------------- ### Include Stylesheet - CSS Import Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Import the CSS Device Frames stylesheet into an existing CSS file using the @import rule. This method is useful for organizing styles within CSS files. ```css @import "path/to/device-frames.css"; ``` -------------------------------- ### CSS: Device Frame with Custom Grid Columns and Rows Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This CSS snippet shows how to customize the internal grid layout of a device frame using CSS variables `--grid-columns` and `--grid-rows`. This allows for complex arrangements of content within the frame, such as multiple columns and rows. ```css .app-frame { --grid-columns: 1fr 1fr; --grid-rows: 1fr auto; display: grid; align-items: stretch; min-height: 200px; text-align: center; } ``` -------------------------------- ### Device Frames with Titles HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Shows how to add a title to the device frame using the `data-title` attribute. This is demonstrated for both macOS and Windows themes, including a centered title variation. ```html <div class="app-frame mac" data-title="Title"></div> <div class="app-frame win" data-title="Title"></div> <div class="app-frame mac centered" data-title="Title"></div> ``` -------------------------------- ### Include Stylesheet - Sass/SCSS Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md In Sass 1.2.3+ environments, you can use the @use rule to include the CSS Device Frames stylesheet. This leverages Sass's module system for better dependency management. ```scss // Sass 1.2.3+ @use "node_modules/css-device-frames/dist/device-frames.css"; ``` -------------------------------- ### HTML: Scrolling Device Frame with Content Height Defined Externally Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML demonstrates a scrolling device frame where the height of the frame itself is explicitly set using inline styles (`height: 15em;`). The content inside the frame will then scroll to fit within this defined height. ```html  <div class="app-frame mac scrolling" style="height: 15em;"> <div> ... </div> </div> ``` -------------------------------- ### HTML: Scrolling Device Frame with Content Wrapper Height Defined Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md This HTML shows a scrolling device frame where the height is applied to an inner content wrapper div, rather than the frame itself. This allows the frame to adapt its own dimensions while the content within scrolls to fit the specified wrapper height. ```html <div class="app-frame mac scrolling">  <div style="height: 15em;"> ... </div> </div> ``` -------------------------------- ### Content Styling - Scrolling and Grid HTML Source: https://github.com/jhildenbiddle/css-device-frames/blob/master/docs/index.md Style content within the device frame for scrolling or centering using the 'scrolling' class or CSS Grid. The 'scrolling' class enables vertical scrollbars for overflowing content, while Grid can be used for precise alignment. ```html  <div class="app-frame mac dark scrolling" data-url="my-domain.com"> <div style="height: 12em;"> <p style="margin-top: 0;">Look again at that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there--on a mote of dust suspended in a sunbeam.</p> <p>Carl Sagan - <em>Pale Blue Dot</em></p> </div> </div>  <figure class="app-frame win" data-title="Centered Content" style=" display: grid; align-items: center; justify-items: center; "> <span style="font-size: 3em;">🎯</span> </figure> ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.