At the start of each year I write a post in which I present a few things I’d like to accomplish before I write the same post at the start of the following year. As usual I’m behind on some of what I set out to do, but I’m happy to say that at least one of my goals is nearing completion.
I spent much of the year working on a second edition of Design Fundamentals, which turned into more of a rewrite than I initially expected. I’ve spent the last couple of months learning the basics of setting up as an author on Amazon and preparing the book and two others to publish there.
I’m happy to announce that all three are now available through Amazon and I’m already working on setting up shop with other online stores.
- Sass for Beginners: How to Write More Organized and Maintainable Stylesheets
- Flexbox: A Beginner’s Guide to the CSS Flexible Box Layout Module
- Design Fundamentals—Elements, Attributes & Principles: A Beginner’s Guide to Graphic Communication
Here’s a little more detail about each.
Sass for Beginners
I wrote this book early last year. I took the series I published on this site and treated it as a draft for the book. Editing was limited. I had to remove a lot of last week and next week stuff as well as fix typos and the like, but beyond that I didn’t have to do a lot to the series to turn it into a book.
In fact, I chose this as the first book to write last year because I thought it would be the quickest and easiest to finish and I could spend most of the time working out the format I would use for the other books and any I’ve yet to write.
I grabbed the file I used to create the cover image of Design Fundamentals and used it as a template for a cover for this book. It’s a simple design that I can easily modify. I hope it will present a consistent look to all of my design and development books so ideally if you like one, you’ll be drawn to the others should you come across them.
Inside the Book
- Introduction: A quick walk through of the syntax and output settings along with how to get and install Sass.
- Nesting: How to nest your Sass code and why you may or may not want to. I also include information about using Sass with BEM or SMACSS and similar.
- Variables: Everything you want to know about working with variables in Sass.
- @Rules and Directives: A quick walk through of CSS @rules and then more in-depth talk about @media, @import, @extend, @mixin, including when to use @extend and when to use @mixin. I also talk about @include and offer some thoughts for directory structure.
- Data Types, Operators, and Functions: How to work with numbers, strings, colors, lists, and maps in Sass, what operators you can use with each, and what native functions exist to work with them as well.
- Control Directives: How to use @if (and the if() function), @for, @each, and @while control directives.
- Custom Functions: How to write custom functions with keyword and variable arguments. Also when to use a function and when to use a mixin.
Flexbox
There’s a bit of a story with this book. Twice before I worked on it and failed to finish because other work pulled me away. I started a few years ago and was most of the way through a draft of the book when Adobe contacted me to write CSS Animation and Transitions for the Modern Web putting an end to my work on a book about flexbox for the year.
I picked it up again the following year where I left off, using what I had written as a draft in need of updating. I came very close to finishing and then found myself busy with client work for a long enough time that I didn’t get back to the book. The third time was a charm. I used my last attempt as another first draft and late last year I finally finished it.
I did my best to explain how the flexible box model works in more detail than you’ll usually find. I’ve also noticed some misinformation out there about flexbox, mainly in regards to how they grow and shrink, that I hope to clear up.
Inside the Book
- Introduction: Some general information and history about flexbox including when you should use flexbox and when you should use CSS grids instead.
- The Flexible Box Layout Module: A walk through of the basics of the flexible box layout module. This chapter covers the terminology and then talks about flex containers and flex items and how to create them.
- Order and Orientation: How to use the flex-direction, flex-lines, flex-flow, and display order properties as well as information about nesting flex containers and flex items.
- Flexibility: How to use the flex-grow and flex-shrink properties. This chapter also talks about the difference between absolute and relative flex and offers some common flex values that you’re likely to use.
- Alignment: This chapter begins with auto-margins and then moves into discussing main axis and cross axis alignment. It also talks about aligning flex-lines as opposed to flex-items.
- Examples: I end the book with a few examples on centering, forms, card layout, and navigation. I wouldn’t necessarily use the code here “as is” for real projects (though you probably could in some cases). Each of the examples was chosen to show at least one flexbox feature and reinforce the theory part of the book.
Design Fundamentals
I’ve been wanting to write a second edition of this book for a few years. Originally my intent was to clean up typos and similar kinds of errors that I’m embarrassed I didn’t catch the first time around. I also wanted to rework a few images and double check that I had permission to use those I didn’t create.
Mostly, I wanted to rewrite the first chapter on visual grammar. The chapter exists so I could have some kind of theme to tie the book together, but I was never happy with it. Based on a comment I received here shortly after publishing the book, I dug into the topic of visual perception, how the eye takes in its visual surroundings, and how what’s stored in memory influences where we look next.
I think the topic of visual perception makes a better case for so many of the principles and guidelines of graphic design and I now have a new first chapter in the book to reflect that. Changing this first part of the book also required a number of changes throughout.
Finally, I’d like to think my understanding of design and my ability to write about it have grown at least a little since writing the first edition so a rewrite seemed in order. In the end, despite the couple of months I expected, the rewrite took closer to seven months.
Inside the Book
- Introduction: This is a short introduction sharing why I decided to write the book initially and what’s inside.
- Visual Perception: A walk through of the two-way process of visual perception. This chapter talks about how our eyes take in visual information for processing and how our memory influences what our eyes notice.
- Elements: Talk about the marks you make on the canvas as well as the canvas itself. This chapter covers space, points and dots, lines, planes and shapes, and volumes and mass.
- Attributes: Different characteristics you can apply to elements. Characteristics like patterns, textures, size, scale, proportion, and color. The chapter builds to talk about visual weight and visual direction in a composition.
- Principles: This chapter begins with a discussion of gestalt principles and how the principles arise out of visual perception. It then covers principles and guidelines of graphic design such as similarity, contrast, dominance and focal points, hierarchy, flow, and balance.
If you purchased the first edition and signed up for the mailing list, I’ve sent an email to the address you used when to purchase that tells you how you can get your copy of the second edition for free as promised.
If you didn’t buy the first edition, you can get the second edition at Amazon or here on the site. In time the book will be available at other online stores, the time being dependent on how quickly I can learn the ins and outs of the other stores.
Reviews Welcome
I don’t ask for much so I hope you don’t mind if I ask for something now. Reviews help and I’d certain appreciate some. If you read and enjoyed the first edition of Design Fundamentals, it would help me a lot if you would hop over to Amazon and leave a 5-star rating and review. I’ll ask the same for Apple Books, etc. when the book is available in those locations.
Similarly if you purchase either Sass for Beginners or Flexbox, ratings and reviews of the books would be welcome. You can find all my books on my Author Page.
Thank you in advance.
- Sass for Beginners: How to Write More Organized and Maintainable Stylesheets
- Flexbox: A Beginner’s Guide to the CSS Flexible Box Layout Module
- Design Fundamentals—Elements, Attributes & Principles: A Beginner’s Guide to Graphic Communication
Closing Thoughts
I originally wanted to write a couple more books this year, but I have a feeling I won’t get too far. It’ll take me some time to work out how to set up shop on the different online stores and I’ve a feeling the end of the year holidays will interrupt here and there as well.
I’ll likely gather all the reference material for the next book(s) I plan to write so I can jump right in after after the new year begins. Did I really just mention New Year’s? It’s going to be here before we know it.
Download a free sample from my book, Design Fundamentals.