Lyrad Digital - Mastering CSS Grid Course snippets for Visual Studio Code

Visual Studio Code extension that contains all snippets used in Lyrad Digital's "Mastering CSS Grid" course.

Gif

Usage

To use the course snippets, open a HTML or CSS file, and start typing ld-gc-, followed by pressing Ctrl+Space. A list of snippets will show up

Simple Examples Code Snippets

Below is the list of all the snippets in this extension that relates to the simple examples in this course. Each prefix starts with ld-gc-se.

Prefix	Video	Description
`ld-gc-se-four-column-layout-styles`	Building a 4 column layout	CSS for the basic styling of the 4 columns and it's container
`ld-gc-se-side-bar-styles`	Building a sidebar	CSS for the basic styling of side bar content
`ld-gc-se-centering-modal-dialog-styles`	Centering a modal dialog	CSS for the basic styling of modal and it's content
`ld-gc-se-sticky-footer-styles`	Creating a sticky footer	CSS for the header, footer and main content area in the layout
`ld-gc-se-formatted-form-styles`	Basic form formatting	CSS for the basic styling of the form and it's fields and inputs

Advanced Examples Code Snippets

Below is the list of all the snippets in this extension that relates to the advanced examples in this course. Each prefix starts with ld-gc-ae.

Prefix	Video	Description
`ld-gc-ae-holy-grail-styles`	The Holygrail layout	CSS for the basic styling of the content in the Holygrail layout
`ld-gc-ae-media-objects-layout-styles`	The Media Objects layout	CSS for the basic styling the media item and it's comments
`ld-gc-ae-monthly-calendar-styles`	A Monthly Calendar	CSS for the basic styling of the calendar
`ld-gc-ae-twitter-layout-feed-html`	A Twitter Responsive Layout	HTML for the feed text to make the feed really long
`ld-gc-ae-movie-gallery-mobile-shell-styles`	A Responsive Movie Gallery	CSS for building the basic shell for the mobile layout
`ld-gc-ae-movie-gallery-article-styles`	A Responsive Movie Gallery	CSS for styling an individual movie
`ld-gc-ae-movie-gallery-remaining-articles-html`	A Responsive Movie Gallery Continued	HTML for the rest of the movies in the gallery
`ld-gc-ae-movie-gallery-remaining-styles-for-single-row-layout`	A Responsive Movie Gallery Continued	CSS for styling the rest of the single row based layout
`ld-gc-ae-movie-gallery-ipad-grid-layout`	A Responsive Movie Gallery Finale	CSS for styling the application for display on iPad or larger in landscape mode

Chat Application Code Snippets

Below is the list of all the snippets in this extension that relates to the chat application example. Each prefix starts with ld-gc-app-chat.

Prefix	Video	Description
`ld-gc-app-chat-container-styles`	Setting up the basic shell	CSS for styling the main chat shell
`ld-gc-app-chat-sections-styles`	Setting up the basic shell	CSS for styling all the section in the shell
`ld-gc-app-chat-search-container-styles`	Building the search conversation section	CSS for styling the input
`ld-gc-app-chat-new-conversation-styles`	Building the add conversation section	CSS for styling the anchor tag
`ld-gc-app-chat-title-styles`	Building the chat title section	Adds pointer to when hovering over trash icon
`ld-gc-app-chat-form-styles`	Building the chat form section	CSS for styling the input
`ld-gc-app-chat-conversation-styles`	Building an individual conversation item	CSS for styling the conversation item and it's contents
`ld-gc-app-chat-remaining-conversations-html`	Adding more conversation items	HTML to represent the remaining conversations
`ld-gc-app-chat-webkit-scrollbar-fix`	Adding more conversation items	CSS to fix scrollbar issues in Chrome on Windows
`ld-gc-app-chat-message-styles`	Creating some initial chat messages	CSS to styles each message
`ld-gc-app-chat-message-thumbnail-styles`	Adding chat profile pictures	CSS to style the thumbnail image
`ld-gc-app-chat-remaining-messages-html`	Adding the finishing touches	HTML to represent the remaining chat messages

Uber Eats Clone Code Snippets

Below is the list of all the snippets in this extension that relates to the Uber Eats clone application. Each prefix starts with ld-gc-app-uec.

Prefix	Video	Description
`ld-gc-app-uec-main-layout-styles`	Setting up the basic layout for mobile	CSS to style the header, main and footer elements
`ld-gc-app-uec-top-header-styles`	Building the top header	CSS to style contents of the top header
`ld-gc-app-uec-store-search-styles`	Building the search store section	CSS to style contents of the search store section
`ld-gc-app-uec-main-delivery-styles`	Adding the delivery widget to the main section	CSS to style the delivery grid
`ld-gc-app-uec-remaining-stores-html`	Building the store list grid	HTML to represent the remaining stores in the store list
`ld-gc-app-uec-store-list-styles`	Building the store list grid	CSS to style stores in the store list
`ld-gc-app-uec-footer-styles`	Building the footer	CSS to style the contents of the footer
`ld-gc-app-uec-phone-landscape-styles`	Modifying the footer for landscape mode on mobile	Media query for mobile in landscape mode
`ld-gc-app-uec-tablet-portrait-styles`	Dealing with the store list on tablet	Media query for tablet in portrait mode with padding
`ld-gc-app-uec-large-tablet-styles`	Dealing with the store list on larger devices	Media query for tablet devices in landscape mode
`ld-gc-app-uec-very-large-device-styles`	Adding the delivery widget to the top bar	CSS to style the delivery widget when in the top bar

YouTube Clone Code Snippets

Below is the list of all the snippets in this extension that relates to the YouTube clone application. Each prefix starts with ld-gc-app-ytc.

Prefix	Video	Description
`ld-gc-app-ytc-top-bar-styles`	Building the top bar	CSS to style the contents of the top bar
`ld-gc-app-ytc-thumbnail-styles`	Building the thumbnail	CSS to style the image thumbnail of the main video
`ld-gc-app-ytc-video-title-styles`	Building the video title and views	CSS to style the video title section
`ld-gc-app-ytc-social-icon-styles`	Building the social interaction section	CSS to style the social media section
`ld-gc-app-ytc-channel-detail-styles`	Building the channel details section	CSS to style the channel details section
`ld-gc-app-ytc-autoplay-styles`	Building the related videos autoplay section	CSS to style the autoplay button etc
`ld-gc-app-ytc-related-video-list-styles`	Building out the related videos	CSS to style an individual related video
`ld-gc-app-ytc-remaining-related-video-html`	Building out the related videos	HTML to represent the rest of the related videos
`ld-gc-app-ytc-comment-heading-styles`	Building the comments heading section	CSS to style the comments heading and the toggle buttons
`ld-gc-app-ytc-comment-heading-script`	Building the comments heading section	A snippet of javascript that toggles the display of comments etc
`ld-gc-app-ytc-comment-form-styles`	Building the add comment form	CSS to style the comment form
`ld-gc-app-ytc-comment-styles`	Building out a list of comments	CSS to style an individual comment
`ld-gc-app-ytc-remaining-comments-html`	Building out a list of comments	HTML to represent the rest of the comments
`ld-gc-app-ytc-response-button-styles`	Building out the see response button	CSS to style the 'See Responses' button and the response list
`ld-gc-app-ytc-response-button-script`	Building out the see response button	A snippet of javascript that fires when the 'See Responses' button is clicked
`ld-gc-app-ytc-response-styles`	Adding the responses	CSS to style an individual response
`ld-gc-app-ytc-responses-html`	Adding the responses	HTML to represent the rest of the responses
`ld-gc-app-ytc-related-videos-mobile-landscape-styles`	Building related videos in landscape mode for mobile	Basic styling for the related videos when we are using a mobile in landscape mode
`ld-gc-app-ytc-related-videos-tablet-portrait-styles`	Building related videos in portrait mode for tablet	Basic styling for the related videos when we are using a tablet in portrait mode
`ld-gc-app-ytc-related-videos-tablet-landscape-styles`	Building related videos in landscape mode for tablet	Basic styling for the related videos when we are using a tablet in landscape mode
`ld-gc-app-ytc-related-videos-large-landscape-styles`	Building related videos on large devices	Basic styling for the related videos when we are using a large device in landscape mode

Mastering CSS Grid - Course Snippets

Lyrad

Lyrad Digital - Mastering CSS Grid Course snippets for Visual Studio Code

Usage

Simple Examples Code Snippets

Advanced Examples Code Snippets

Chat Application Code Snippets

Uber Eats Clone Code Snippets

YouTube Clone Code Snippets

Release Notes

1.0.0

Added

1.0.1

Added

1.0.2

Changed