Responsive Image Grid. Learn how to create an image gallery that varies between four, two or full-width images, depending on screen size. Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.
- Responsive Grid CSS We have had many requests to make the grid feed responsive. Until we find the time to create these shortcode options you can add this CSS to the Custom CSS option on the Settings Global Options page of our plugin.
- See the CSS Utilities for more styles that can be applied to the grid. There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
- Responsive Image Grid. Learn how to create an image gallery that varies between four, two or full-width images, depending on screen size.
- Use the Generator to create a Responsive website your way with Grid CSS Generator.
![Responsive grid css framework Responsive grid css framework](https://www.bypeople.com/wp-content/uploads/2015/05/dashboard-control-panel-css-template.png)
Responsive#
Spectre provides a neat responsive layout grid system and responsive visibility utilities.
col-lg-8
col-md-6
col-sm-4
col-lg-4
col-md-6
col-sm-8
There are
col-xs-<1-12>
, col-sm-<1-12>
, col-md-<1-12>
, col-lg-<1-12>
and col-xl-<1-12>
available for flexible grid across mobile, tablet and desktop viewport usage.col-xs-<1-12>
apply to window width smaller than or equal to 480px.col-sm-<1-12>
apply to window width smaller than or equal to 600px.col-md-<1-12>
apply to window width smaller than or equal to 840px.col-lg-<1-12>
apply to window width smaller than or equal to 960px.col-xl-<1-12>
apply to window width smaller than or equal to 1280px.col-<1-12>
apply to all window width, including the width wider than 1280px.
Responsive container#
The responsive layout also provides fixed-width containers. Use
grid-xs
(480px), grid-sm
(600px), grid-md
(840px), grid-lg
(960px) or grid-xl
(1280px) to the container for a fixed-width container with the specific max-width. Responsive visibility#
The responsive visibility utilities help show and hide elements on specific viewport sizes.
size-xs | size-sm | size-md | size-lg | size-xl |
---|---|---|---|---|
hide-xs | ||||
hide-sm | ||||
hide-md | ||||
hide-lg | ||||
hide-xl |
![Css Css](https://i.ytimg.com/vi/oxi7pfa5DKA/maxresdefault.jpg)
For hiding elements on specific viewport sizes, there are classes
hide-xs
, hide-sm
, hide-md
, hide-lg
and hide-xl
available.hide-xs
hides elements when the window width is smaller than or equal to 480px.hide-sm
hides elements when the window width is smaller than or equal to 600px.hide-md
hides elements when the window width is smaller than or equal to 840px.hide-lg
hides elements when the window width is smaller than or equal to 960px.hide-xl
hides elements when the window width is smaller than or equal to 1280px.
size-xs | size-sm | size-md | size-lg | size-xl |
---|---|---|---|---|
show-xs | ||||
show-sm | ||||
show-md | ||||
show-lg | ||||
show-xl |
For showing elements on specific viewport sizes, there are classes
show-xs
, show-sm
, show-md
, show-lg
and show-xl
available.show-xs
shows elements when the window width is smaller than or equal to 480px.show-sm
shows elements when the window width is smaller than or equal to 600px.show-md
shows elements when the window width is smaller than or equal to 840px.show-lg
shows elements when the window width is smaller than or equal to 960px.show-xl
shows elements when the window width is smaller than or equal to 1280px.
Responsive Resizer#
Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.
GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version
Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
This example implements a responsive website design using CSS, HTML, and JavaScript. The layout has two variations, suitable for both desktop browsers and mobile devices.
- Layout design
- Implementation
- Appearance
Basic setup
Begin with index.css and index.html from the Grid CSS holy grail layout.
Place index.css and index.html in the same folder. Open index.html in a web browser.
Layout design
Our example shows one way to create the home page for a fictional business/service. The home page is the first thing the user sees when visiting the site.
Content outline
The primary information to appear on the home page is listed below.
- Name/logo — The identity of the business/service, located in the header, left justified.
- Announcements — The first section of the main body. The user sees this information above the fold, before seeing items for sale. This space may contain important updates, limited-time deals, or recommended items.
- Items for sale — The name, description, price, and current inventory of various items for sale.
- Upcoming events — Information about future business-related events where the user may want to participate.
- Message of the day — Rotating 'flavor' content, such as a quiz or an inspirational quote.
- Footer — Authorship and/or Copyright information.
Subcontent outline
The following links and supplemental information are accessible on the home page, encouraging the user to explore. This subcontent may appear differently in the layout, depending on the user's viewing device.
- On a desktop browser or a mobile device in landscape mode, all subcontent is displayed.
- On a mobile device in portrait mode or a desktop browser window resized narrow, the side panels disappear. Subcontent is repositioned or available in a menu.
The following subcontent is accessible on the home page.
- About — A link to a separate identity statement page. In desktop/landscape mode, it appears in the header, justified right. In portrait mode, it is a menu item.
- Contact — A link to a separate page with contact information of the business/service, such as a postal address, e-mail address, phone number, etc. In desktop/landscape mode, this link appears in the header, justified right. In portrait mode, it is a menu item.
- Sections — Links to other sections of the website. In portrait mode, each section link is a menu item.
- Partners — Links to partner businesses/services. In desktop/landscape mode, partners are displayed in the right panel. In portrait mode, they are displayed at the bottom of the main body.
Layout diagram
This design has two layout variations.
- One layout for devices in landscape mode.
- One layout for devices in portrait mode.
Desktop browsers are compatible with both, but primarily view the landscape layout.
Aescripts iexpressions v2 0 download free. The layouts are diagrammed as follows.
HTML elements
In this design, the following HTML elements are each assigned a specific layout purpose.
Element | Purpose |
---|---|
<div> | The division or div element is a fundamental building block of the layout. The entire page is contained in a div, including the component grid items (header, panels, main body, footer). A div can contain another div. |
<section> | Contains a unique section of information, such as 'Announcements,' 'Items for sale,' etc. In this layout, the main body is implemented as a section of sections. |
<h1> | Largest heading text, used for the name of the website. |
<h2> | Large heading text, used for the nav items (About, Contact). |
<h3> | Medium heading text, used for section headings (Our friends, Announcements). |
<h4> | Small heading text, used for content titles (Open for business, Cider fest). |
<p> | A paragraph of text expected to flow to the next line. |
<span> | A range of alternate-styled text that doesn't break the paragraph. |
<table> | Tabular information arranged in rows and columns, such as the items for sale. |
Flexbox
CSS Flexible Boxes (abbreviated as Flexbox) is a set of special CSS attributes. It creates elements that expand or contract ('flex') automatically, depending on their content and layout context.
An element with attribute display: flexbox is a flexbox container. If the container shape changes (e.g., if the user resizes the browser window, or rotates their mobile device), its child elements change their relative position and/or shape. The elements flex in one dimension, either horizontally (in a row) or vertically (in a column).
The holy grail layout has five major areas that flex.
- The header and footer flex horizontally (flex-direction: row), left-to-right.
- The left panel, main body, and right panel flex vertically (flex-direction: column), top-to-bottom.
In portrait mode, the panels are hidden. The menu is implemented as a flex column.
Implementation: CSS, JavaScript, and HTML
CSS: index.css
JavaScript: index.js
Css Grid Responsive Design
This JavaScript implements the menu show/hide toggle, which triggers when the menu button is pressed.
HTML: index.html
Appearance
In landscape view, the panels are displayed.
Landscape/desktop view
Portrait view
Responsive Grid Css
In portrait view, the panels are hidden, and the menu is active. Partners are displayed as the final section of the main body.