About
So this is me just messing with layouts ...
Try Resizing the Browser
In this layout the menu responsiveness is controlled by the CSS in side-menu.css, and the JavaScript in ui.js. The JS file uses vanilla JavaScript to simply toggle an active class that makes the menu responsive. ... even though for the life of me I cannot get the sub-menus thing to work!
To use this layout, you can just copy paste the HTML, along with the CSS in side-menu.css, and the JavaScript in ui.js. Or alternatively you can go to the source https://purecss.io/.
Some responsive layout
Try Resizing your Browser
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Non-responsive Column layout
Half
Half
Thirds
Thirds
Thirds
Quarters
Quarters
Quarters
Quarters
Try Resizing the Browser
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique lectus ut ex dignissim laoreet. Nam scelerisque lacus ac justo viverra ornare. Sed facilisis diam ac arcu dignissim, sed vehicula turpis sagittis. Morbi vel orci eget leo auctor mollis a ut ante. Quisque ac dui in velit luctus tempus. Maecenas ut libero sed urna pellentesque viverra. Sed sem justo, auctor sit amet molestie vehicula, tempor sed ex. Nulla eu tellus commodo, mollis ex sed, finibus ex.
Aliquam ullamcorper, sapien a maximus finibus, mi dui placerat justo, sit amet vulputate sem elit nec neque. Nunc auctor vitae purus a mollis. Praesent ac eleifend nisi. Morbi nulla metus, consequat in dui sit amet, tincidunt fermentum lorem. Maecenas luctus ex eget iaculis tristique. In ipsum mi, elementum vel rhoncus quis, lacinia sed tellus. Curabitur eleifend ac dolor auctor blandit. Fusce vestibulum risus sed rhoncus suscipit.
Aenean vitae dignissim mi. Phasellus metus enim, egestas eu egestas a, aliquet eu ex. Nullam fermentum nisl non risus tempus dapibus. Proin facilisis urna ac egestas dictum. Vivamus suscipit non libero nec varius. Sed eget egestas orci, a elementum magna. Fusce facilisis lobortis augue sed congue. Aliquam aliquet ante massa, ut vulputate risus iaculis ut. Aenean feugiat nunc libero, id hendrerit enim venenatis in. Ut eget bibendum tellus. Vivamus urna elit, euismod quis ullamcorper id, dignissim in risus. Nulla nec eleifend neque, quis pulvinar libero. Quisque consequat venenatis elit eget sagittis. Vestibulum hendrerit sodales ex, sit amet pellentesque arcu vestibulum ac. In a lacus sit amet lorem sodales vehicula. Mauris non mattis velit.
I might be happier as a floating element
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Morbi pulvinar rutrum mollis. Vestibulum tempor ligula ac molestie fermentum. Integer eget tellus dapibus, condimentum tellus a, eleifend diam. In hac habitasse platea dictumst. Ut et nisi commodo, eleifend felis at, tincidunt arcu. Donec bibendum eu ante et tempor. Nam maximus nisl et accumsan eleifend. Mauris justo ligula, ultricies luctus pharetra eu, mollis semper lorem.
Quisque in lorem malesuada, sodales dui sed, tincidunt lectus. Praesent leo mauris, sollicitudin et imperdiet id, blandit vel velit. Maecenas ac tincidunt arcu, vitae auctor dui. Mauris pulvinar at tellus vel posuere. Cras in vehicula turpis. Nullam mattis interdum nisl at luctus. Nam sagittis nunc diam, sit amet interdum magna scelerisque a. Cras ut tincidunt nunc. Mauris eget faucibus turpis. Integer tincidunt enim eget convallis suscipit. In hac habitasse platea dictumst. Nunc quam lectus, tempus at cursus at, ultrices ac lacus. Integer facilisis eu eros vitae ullamcorper. Nunc lectus dolor, iaculis vitae sollicitudin quis, vehicula nec neque.
Browning St
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nunc ex quam, iaculis a risus at, efficitur porttitor metus. Ut vulputate enim quis consequat molestie. Duis quis faucibus odio, ac consectetur est. In tempor tellus eu lobortis mollis. Mauris porta, nulla commodo consectetur luctus, tellus risus molestie augue, sed aliquet nulla mauris et purus. Duis vulputate neque nec dui efficitur, at euismod dolor semper. Etiam bibendum, ante nec scelerisque euismod, nibh orci ornare ipsum, sed porta diam ipsum at neque. Integer vestibulum consectetur erat fringilla porttitor. Aenean in augue ipsum. Sed pharetra arcu in sapien ornare dictum. Integer at semper tellus. Maecenas felis dui, iaculis ut feugiat et, feugiat rhoncus libero.
Responsive Column layout using Grid
A solution suggested by Kevin Powell ( codepen Youtube ) which doesn't use all the long-winded bootstrappy class names of the preceeding layout.
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ullam at optio totam ab est ratione, sed, illo doloremque dignissimos vero voluptatum dolore corporis possimus eos, nobis alias consequatur vel!sit amet consectetur, adipisicing elit. Eligendi corrupti sit ipsum totam perspiciatis laudantium sequi officiis eveniet error minus.
Optio, sit excepturi.
Itaque, ab dolor? Quis architecto non obcaecati earum optio ipsum, magni voluptate repudiandae neque consequatur, quibusdam doloremque in libero maiores.
Alias, quae? Tempora!
Nisi velit laborum, sequi sit perferendis, ea exercitationem ipsa officiis inventore tenetur assumenda! Consequuntur accusantium quibusdam molestias nam, veritatis labore!