This is a simple, responsive layout template for web mapping projects. It can save you some time scaffolding your project so you can focus on everything else.

It's fullscreen, and features a top nav, fixed-width sidebar, and main map area.

This sidebar will scroll if its content becomes longer than the map.

On mobile devices, the orientation of the sidebar and map containers changes to a column, with the map on top taking 60% of the height, and the sidebar on the bottom.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium diam ac ex malesuada, vel commodo ligula porttitor. Aenean blandit tellus et nisl suscipit bibendum at at nunc. Mauris sagittis porttitor convallis. Duis eget maximus ipsum. In cursus ornare dictum. Quisque enim ex, sagittis non turpis ac, ornare ullamcorper nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean eget risus vel magna varius commodo eu eu quam. Nam sed sagittis justo, vitae placerat felis. Sed sed congue purus. Sed hendrerit tortor augue, vitae pellentesque ex ornare molestie.

Vestibulum ultricies urna nec maximus facilisis. Morbi ut suscipit augue, non suscipit felis. Etiam aliquam molestie auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac cursus neque, in semper ante. Nullam purus velit, vestibulum quis dictum ac, elementum dapibus metus. Integer feugiat luctus quam in auctor. Etiam eu laoreet tortor. Vivamus sit amet finibus elit. Suspendisse vel varius dolor, ac egestas mauris.