Minimal frontend playground to experiment with responsive layouts, media queries, and flexbox, with in‑browser LESS compilation and a local dev server.
# from project root
npm install
npm start
# BrowserSync serves ./public at http://localhost:3000Open one of these pages:
http://localhost:3000/index.html— App layout with sidebar modes and content blockshttp://localhost:3000/flex.html— Flexbox layout with collapsible sidebarshttp://localhost:3000/original-index.html— Media query demo by device/width
Pages load external assets via protocol‑relative URLs (e.g., //cdnjs.cloudflare.com/...). Opening files directly with the file:// scheme will not load those assets. Use npm start (BrowserSync) or any static server.
npm start # Runs BrowserSync serving the public/ directory and watches filesmedia-query-testing-master/
├── public/
│ ├── index.html # App-style layout with sidebar modes
│ ├── flex.html # Flexbox layout playground
│ ├── original-index.html # Device/width-targeted media query demo
│ └── css/
│ ├── app.less # App shell styles (sidebar/header/footer)
│ ├── flex.less # Flex utilities and responsive behaviors
│ ├── site.less # Media query showcase by device/width
│ ├── style.less # Additional demo styling
│ ├── reset.css # CSS reset (Meyer reset)
│ └── normalize.css # CSS normalize
├── package.json # Scripts and BrowserSync dependency
└── README.md
-
index.html- Loads
reset.css,app.less, andstyle.lesswith in‑browser LESS vialess.js. - Sidebar mode links set the
<body>class (app-sidebar-fixed,app-sidebar-mobile,app-sidebar-hidden,app-sidebar-icon). - The hamburger (
.app-menu-trigger) setsapp-sidebar-mobileon smaller screens.
- Loads
-
flex.html- Uses
flex.lessfor a simple three‑column responsive layout. - “Toggle” buttons toggle the
collapsedclass on sidebars. - At
@media (min-width: 720px), layout switches from column to row and orders areas.
- Uses
-
original-index.html- Loads
site.less, which demonstrates media queries targeting common device sizes/orientations. - Elements like
.smartphone,.ipad,.desktop,.large-desktop,.iphoneswitch between disabled/enabled styles based on breakpoints.
- Loads
- LESS is compiled in the browser via
less.jsCDN; no build step is required. - Edit files under
public/css/*.lessand refresh; with BrowserSync running, changes hot‑reload automatically. - Highlights:
app.less: app shell, spacing helpers, header/footer, sidebar colors.flex.less: mobile‑first sidebar behavior, fixed/icon widths atmin-width: 720px.site.less: device/width‑based media query examples (for learning/demo only).
- Node.js and npm
- Internet access (for
less.js, jQuery, and Font Awesome via CDN)
- Page doesn’t style correctly when opened as a file: run a local server (
npm start). - CDN assets blocked offline: comment out external CSS/JS links or serve local copies.
- Port already in use: BrowserSync will pick another port; check the terminal output.
ISC (see package.json).