Category Archives: Firefox

Blue Notes: The remixes

A little bit blown away that my Blue Notes project is Netmag’s ‘Side project of the month’,  I thought I’d put a quick post together detailing some of the updates I’ve been making recently, especially with regard to CSS Grid.

Whilst this is primarily about layout and how, with the help of CSS Grid, I arrived at hack-free solutions for occasionally complex designs, I also mention how I used psuedo-selectors, CSS filters and blend-modes to create aged and worn effects a little later in the post too. If you’d like to know more about how I made type fluid, you can read about the methods I used to do this in my original post and in a recent post on creating fluid distressed text in CSS.

TL;DR

By way of example Cornbread was one of the most challenging and exciting sleeves to build, the sleeve below being built entirely in CSS Grid. I’ve made a quick screencast to demo the sleeve re-sizing in the browser and there’s a repo with the code for this and all the other sleeves I’ve made here. Cornbread and some of the other sleeves are on CodePen too.

A project review

Overall I was pretty happy with the first batch of sleeves I made.

I’d developed a solid process, was able to match the originals almost identically and make layout and typography fluid. It was great to be able to re-create Reid Miles work in the browser and to produce some radically different layouts to those we see everyday too. That said there were some elements of production that I was less satisfied with.

Aside from problems sourcing fonts, three things irked me about the build of some of the sleeves, all of which were pretty much structural;

Marking up content as the information on the sleeve required and then having to re-order this visually to match the original designs meant I had to use absolute positioning. Whilst I was able to address this problem using Flexbox and the order property this wasn’t without it’s pitfalls.

In addition, I was unhappy that many of the layouts used background images. Whilst I would be ok with this if they were used to apply texture or a similar effects, from an accessibility perspective it seemed wrong to have such integral parts of the design removed from the HTML.

Finally and somewhat related to my second point, all the sleeves relied on the padding-bottom hack to ensure they maintained their shape at different viewport widths. Whilst not the end of the world this was something I would prefer not have incorporated.

Incorporating CSS Grid

Grid was a bit of a game changer. Easy to use, I could eliminate all the shortcomings outlined above.

The more I experimented with Grid the more I appreciated the creative freedom and sense of legitimacy that came with it. I could layout great designs without feeling those slight pinpricks  of shame that came from knowing I’d used a hack, trick or absolute positioning or that I might  have inadvertently compromised accessibility.

Working on an early version of the Three Sounds sleeve Feelin Good’.

Here’s how Grid enabled me to address the problems I identified above.

Source order and re-ordering layout

One of the things that excites me most about Grid is that we can separate source order from appearance easily and legitimately. We can create structural mark-up that presents information exactly as the document requires and then re-order it on the page without having to use absolute positioning. We simply tell the browser which spaces we’d like elements or content to occupy.

Screengrabs of Blue Note's Sidewinder an Una Mas sleeves recreated with HTML and CSS

Re-ordering layout whilst maintaining source order was one of the main challenges of this project. I used Flexbox and flex-order on The Sidewinder sleeve and got great results with this, however I switched to CSS Grid to style new sleeves including Una Mas.

Una Mas is a great example of this. Using a mixture of colour, text sizing and placement the design deliberately guides our eye. As we look at the sleeve we instinctively read the titling in a specific order; Una Mas > Kenny Dorham > Joe Henderson / Herbie Hancock / Butch Warren / Anthony Williams and then the Blue Note logo.

The HTML for the grid version of Una Mas is below, it marks-up the page in a way that reflects the hierarchy of information I want to present to the browser and screen readers.

As a quick note I would have preferred to use an unordered list to mark up the band members, however this proved a little tricky to style (possibly a use case for sub-grids?). I’ve opted to use <h3> tags in the interim, but hope to sort the list rules in the near future.

<main class="sleeve">
    <img src="images/una-mas.jpg" alt="Duotone image of Kenny Dorham holding the word Una Mas">
    
    <h1>Una<br />Mas</h1>
    
    <h2>Kenny Dorham</h2>
    
    <h3 class="joe">Joe Henderson</h3>
    <h3 class="herbie">Herbie Hancock</h3>
    <h3 class="butch">Butch Warren</h3>
    <h3 class="anthony">Anthony Williams</h3>
    
    <footer class="logo group">
        <span class="rectangle"></span>
	    <span class="elipse"></span>
	    <span class="label">Blue Note</span>
    </footer>
</main>

Here’s a quick screenshot of the grid the layout was built on.

Screengrab of the Firefox inspector view of a CSS grid layout

And here’s the CSS I used to places elements on the page.

h1 {
	grid-column: 5 / 6;
	grid-row: 3 / 4;
}

h2,
.joe {
	grid-column: 4 / 6;
	grid-row: 2 / 4;
}

.herbie
.butch,
.anthony  {
	grid-column: 2 / 6;
	grid-row: 3 / 4;
} 

footer { 
        grid-column: 3 / 4; 
        grid-row: 2 / 4; 
} 

*Mind blown*

Forgive my excitement, but I think this is amazing and has far reaching implications for the future of web design. Being able to place content ‘anywhere’ we want so easily without compromising source order or using absolute positioning means we have the potential to create pretty much any design we want. All of which means we can bring the visual language we’re used to seeing away from the web, in art, artwork, magazines, posters, on album sleeves and even walls into the browser.

Background images

As mentioned earlier I was never happy with such fundamental elements being removed from my HTML. Whilst I could add an <aria-label> to a containing element this didn’t seem right;  being able to place images in my mark-up and apply alt attributes was what I wanted.

Once again Grid made this easy. A quick look at the mark-up for Una Mas and we can see the image is one of the first elements in the source order, has an alt tag and is visible to screenreaders.

Avoiding the padding bottom hack

Hub-tones was another of those sleeves that looked great but needed a series of hacks to make it work.

Screengrab of Blue Note's Hub Tones album sleeve recreated using HTML and CSS

As with all the sleeves I used the padding-bottom hack to be able to re-size the sleeve whilst maintaining the layout whatever the viewport width. However, the only way I could make the vertical bars resize was to apply the padding bottom hack to these elements too.

Here’s the SCSS I used to re-create the vertical bars, it’s pretty hacky – incorporating floated content, padding-bottom tricks and absolute positioning, it took a fair bit of time to figure out too. With Grid we’d simply define our grid and tell the browser the columns and rows we’d like the elements to fill.

.layout {
	padding: 1.6666% 2.5% 0; 

	.vert-bar {
		width: 9.3%;
		margin-right: 2.0%;
		margin-bottom: 5%;
		height: 0;
		padding-bottom: 77%;
		background-color: black;
		float: left;
	}

	.vert-bar:nth-of-type(6) {
		position: relative;
		height: 72.0001%;
	   	margin-top: 10%;

	   	img {
	   		position: absolute;
	   		bottom: 0;
	   		max-width: 100%
	   	}
       }   	

	.vert-bar:last-of-type {
		margin-right: 0px;
	}
}

Caveats

All of which brings me onto one of, for me, the trickier aspects of incorporating Grid into this project; defining the grid itself.

Whilst I know some of these sleeves are reasonably complex. I’m going to hold my hands up here and say that I’m not convinced the way I’ve created the grids for many of these sleeves is correct or at best in keeping with how the creators of the spec envisaged this being done.

It seems as though by using percentages to create columns and rems to create rows so explicitly I’ve made things harder and more complex than they needed to be. Essentially I still had to do a lot of maths.

Here’s an example of how I styled the grid for The Cooker, whilst it works brilliantly it seems overly complex.

.container {
    grid-template-columns: 15.9% 12.5% 0.75% 41.66% 1% 12.5% 15.6%;
    grid-template-rows: 13.16rem 13.33rem 0.15rem 41.66rem 0.75rem 13.33rem 17.5rem;
}

I’m guessing there must be a more efficient way to create the grid, or at least a way in I could make better use of fr units. If anyone of knows of this, or could point me in the right direction regarding this I’d love to hear from you!

CSS filters and worn effects

Making the sleeves look worn and aged was something I was keen to incorporate into the project as time progressed and I love the fact that we can do this in the browser now.

On Feelin’ The Spirit I used a mixture of background images, pseudo selectors, blend modes and CSS filters to create the worn effects. Here’s a screengrab of the sleeve with the aged effects applied.

I should probably mention this sleeve wasn’t built using Grid, though that said I’ll be updating the repo with a grid version of this soon. Whilst this sleeve uses some of the older techniques I was keen to discard, I’m still quite proud of this as I feel I’d pretty much got the mark-up and styling dialled by this point. I love how powerful, flexible and brilliantly designed HTML and CSS are in that, with a little bit of a thought, we can build such a variety of cool things.

Here’s the HTML for the sleeve;

<div class="wrapper">
	<div class="container filter">
		<h1>
			<span class="feelin">Feelin'</span><br />
			<span class="spirit">The Spirit</span>
		</h1>
		<h2>Grant Green</h2>
		
		<ul class="band">
			<li>Herbie Hancock</li>
			<li>Butch Warren</li>
			<li>Billy Higgins</li>
			<li>Garvin Masseaux</li>
		</ul>
				
		<footer class="logo">
			<span class="rectangle"></span>
			<span class="elipse"></span>
			<span class="label">Blue Note</span>
		</footer>		
	</div><!-- closes container div -->
</div><!-- closes wrapper div -->

Here are the styles that matter. The .wrapper and .container classes create the fluid sleeve, the :after pseudo-selector overlays and blends the worn sleeve effect, the .filter class adds the aged effect.

/* --------------- layout --------------*/

.wrapper {
		width: 100%;
	  	max-width: 600px;
	  	border: 5px solid #fff;
	  	margin: 1rem auto 0;
	  	background-color: #0e1318;
	  }
		
.container{
		position: relative;
		height: 0;
	  	padding-bottom: 100%;
	 	background-image: url('images/feelin-the-spirit.jpg');
	  	background-repeat: no-repeat;
	  	background-size: cover
}

.container:after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url('images/worn-sleeve.jpg');
	  	background-repeat: no-repeat;
	  	background-size: cover;
	  	mix-blend-mode: lighten;
	  	opacity: 0.95;
}

/* ------------------ filters ------------- */

.filter {
  	-webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
  	filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
	opacity: 0.95;
}

Hey! Manchester: CSS flyers

Way back in 2015 I was wondering round Manchester’s Northern Quarter and happened on a stunningly simple flyer for a Deerhoof gig at the Deaf Institute. Being a bit of magpie for tat and found ephemera I kept the flyer safe with the intention of making it in the browser one day, then of-course lost it. Anyways, after a little bit of research I found more of Hey! Manchester’s flyers on-line and set about re-creating them in the browser.

Essentially I think these would make great HTML / CSS cards or especially cool author profiles in an underground (or even overground) online mag. Once again it’s amazing what you can achieve with a little bit of HTML and CSS.

Here’s Jim Ghedi looking epic in a field..

Whilst there’s nothing complex about these flyers, reproducing them gave me the chance to play with CSS clipping paths and blend modes (again!) and I got great results. As regular readers have probably realised by now I’m a little bit fascinated by and passionate about bringing print design into (or should that be onto?) the web. Whilst I love the technical challenge, I feel it’s also really important to try new things, experiment with visual language from different media and to make use of the fantastic new (and not so new) CSS properties and browser capabilities we have at our disposal these days.

I’ve only attached the code for the Jim Ghedi flyer, simply because the clipping path on the image for this was the most ‘complex’, though with Firefox’s inspector tools as good as they are currently this was really easy to perfect in the browser. The code for all the flyers is in a repo should you want it and for those who want to know what the font is (and who wouldn’t.. ;)) it’s Gothic 725. None of the flyers and type are responsive or fluid, though I might sort that out soon. If anyone fancies a challenge fluid type would be incredibly easy to incorporate using the 1vw reset method I’ve described here.


<div class="container">
    <header>
	    <p>Hey Manchester Presents </p>
	    <p>Heymanchester.com </p>
    </header>	
		
    <img src="../images/jim-ghedi-crop-adj.jpg" alt="Jim Ghedi looking epic in a field">	
		
    <section>
	  <h1>
	    <span class="artist">Jim Ghedi </span> <br/ >
	    <span class="support">Plus DBH </span> 
	  </h1>
	  <h2>The Castle Hotel, Oldham Street < br /&gt 
          7.30pm Thursday 17 May 2018 </h2>
	  <p>Tickets £8 adv from The Bar and Seetickets.com </p>
    </section>
</div>



@font-face {
    font-family: 'Gothic725 Bd BT';
    src: url('../fonts/Gothic725BdBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BdBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic725 Blk BT';
    src: url('../fonts/Gothic725BlkBTRegular.woff2') format('woff2'),
    url('../fonts/Gothic725BlkBTRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.group:after {
     content: '';
     display: table;
     clear: both;
}

body {
    padding-top: 1rem;
    text-transform: uppercase;
    line-height: 1.2;
}
		
.container {
    width: 568px;
    height: 800px;
    padding: 30px;
    margin: 0 auto;
    background-color: #cad5fe;
}	

header {
    width: 100%;
    height: 30px;
    padding: 6px;
    margin-bottom: 45px;
    font-family: Gothic725 Bd BT;
    font-size: 16px;
    color: #cad5fe;
    background-color: #010300;
}

header p:first-of-type {
    float: left;
}

header p:last-of-type {
    float: right;
}
 
img {
    display: block;
    width: 440px;
    margin: 0 auto 45px; 
    mix-blend-mode: multiply;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

section {
    border: 2px solid #010300;
}

section p {
    padding: 15px 0 1px 12px;
		}

/* ----------------- type -------------- */

h1 .artist {
    font-size: 71px;
    line-height: 0.75;
}
	
h1 .support {
	font-size: 30px;
}
		
h1, h2 {
    padding: 18px 0 0 12px;
    border-bottom: 2px solid #010300;
    font-family: Gothic725 Blk BT;
}

.support, 
h2 {
    font-weight: 400;
}

h2, h3 {
    font-size: 20px;
}

p {
    font-family: Gothic725 Bd BT;
}