Article Development. Modular Css Grid Layout Sections
The concept of this project was to create modular HTML and CSS code that could be used to create sophisticated, responsive, magazine-style website designs. Each section includes its own modular code that can be plugged into any website and customized; the general styles of the module remain the same. The modules are created with CSS Grid and some newer properties (e.g., position: sticky). No JS has been used to create these layouts.
Made with: HTML (Pug),CSS (Sass)
Layout Demo - Shapes, Clip-Path And Css Grid
A magazine style layout demo using shapes, clip-path and CSS Grid.
Made with: HTML,CSS (SCSS)
Magazine Grid Layout
Playing with CSS Grid & CSS Columns & CSS Shape Outside properties.
Made with: HTML (Pug),CSS (SCSS)
Full Spread Magazine Layout
Full spread magazine layout - CSS Grid Layout
Made with: HTML (Pug),CSS (Sass)
Responsive Css Grid Magazine Layout - 2
Responsive magazine layout using CSS Grid. Best viewed at 1280px.
Made with: HTML,CSS (SCSS)
Responsive Css Grid Magazine Layout - 1
Responsive magazine layout using CSS Grid. Best viewed at 1280px.
Made with: HTML,CSS (SCSS)
Grid Magazine Typography
HTML and CSS grid magazine typography.
Made with: HTML,CSS (SCSS)
Red Onion's: The Daily Prophet
A copy of the Red Onion's Daily Prophet using Flexbox.
Made with: HTML,CSS (SCSS)
Responsive Multicol Magazine Layout
"Visiting Vancouver, I was very impressed with the layout of "Montecristo Magazine", but disappointed that their online presence didn't reflect that. This is my design to improve on that." - Dudley Storey
Made with: HTML
Dynamic Newspaper W/Css Grid
Automatically loads latest stories on refresh. Layout is done with CSS Grid. Built with HTML5, CSS3, JavaScript, jQuery and the News API.
Made with: HTML
Grid Experiment No. 4
Recreation of a print menu from "The Phoenicia Diner in Phoenicia", NY using CSS grid.
Made with: HTML
