DEV Community: Andrew Beeken

My Shiny Gallery | An image gallery in HTML and CSS

Andrew Beeken — Tue, 21 Jan 2020 13:16:39 +0000

Just a little proof of concept for a project I'm planning, using CSS Grid to lay out a photo/image gallery with some simple transition animations on the hover and nice use of media queries to scale the images.

BlurBG - playing with blurry images in CSS and HTML

Andrew Beeken — Wed, 08 Jan 2020 14:13:06 +0000

A little play with the css filter property and some positioning to display a blurry background image.

We're also grabbing the image URL with Javascript and applying it to the article header so that our template would only have to include the featured image one time - this could then be set through your CMS of choice.

Blanka - a Flexible CSS Grid Layout

Andrew Beeken — Fri, 03 Jan 2020 11:25:03 +0000

Just a little fiddle with CSS grid and Flexbox to create an interesting layout that pushes all header and footer content into a sidebar for wider resolutions, compressing down to standard stacked layout for mobile.

Chose the name because I happened to look at the Street Fighter glass on my desk! :)

Grid based full page showcase layout

Andrew Beeken — Tue, 10 Dec 2019 14:37:44 +0000

Trying to visualise an idea I had in this pen of a series of images that fill the screen in either columns or rows depending on resolution. Could be used as a splash homepage for some kind of design oriented site and could be combined with a responsive menu in the smallest resolution. Kind of works on non-grid supporting browsers but it's not overly pretty there.

CSS Grid homepage widget layout

Andrew Beeken — Mon, 02 Dec 2019 13:58:19 +0000

Been playing about with CSS Grid; here's a little test of using it for a homepage layout!

This layout will allow you to create a flexible grid based widget layout that snaps down nicely to a mobile friendly stacked layout.

It takes advantage of the fact that CSS Grid can allow elements to flow naturally but also provides some colspan classes to allow content to be positioned easier.

If you wanted you could use media queries to specify different span rules for different resoutions, but this will be largely dependent on your content needs.

Using homapage block elements you can also add different styles to provide different coloured blocks for highlighting call to action areas.

Have fun!