Layouts para páginas da web (como aplicativos) em menos de um minuto.
A standard responsive layout featuring a header, flexible navigation sidebar, main content area, and footer. Perfect for building web applications and dashboards. Add min-width: 200px to set a minimum sidebar width for better UX.
Open a window to see boundaries in action:
See the Pen GRID layout by Luke Negreiros (@luke-negreiros) on CodePen.
See the Pen Fixed Burger by Luke Negreiros (@luke-negreiros) on CodePen.
The simplest responsive hamburger menu layout with fixed header and footer heights. Ideal for mobile-first web applications where the main content area scrolls independently. Great for SPA (Single Page Applications) and modern web apps.
Open a window to see boundaries in action:
A desktop-optimized layout extending the Fixed Burger layout with additional sidebar navigation and content areas. This non-responsive template demonstrates fixed widths and heights positioning for larger screens and professional dashboard applications.
Open a window to see boundaries in action:
See the Pen Burger with Salad by Luke Negreiros (@luke-negreiros) on CodePen.
See the Pen Full banner with hide content by Luke Negreiros (@luke-negreiros) on CodePen.
A fully responsive website layout using viewport height to display a full-screen banner with hidden content scrollable below. Includes @media queries optimized at 600px breakpoint for responsive mobile navigation and layout adjustments. Perfect for landing pages and hero sections.
Open a window to see boundaries in action: