Skip to content

Christopher James Willcock

Enjoy Kaizen

Category: Typography

https://cjwillcock.ca/2019/02/10/969/

https://cjwillcock.ca/2019/02/09/951/

https://cjwillcock.ca/2019/02/09/929/

https://cjwillcock.ca/2019/02/09/926/

https://cjwillcock.ca/2019/02/09/875/

Quick Fix for Indentation Inconsistency in CSS, Using Chrome Web Browser DevTools

Does your CSS look like this?

@media only screen and (max-width: 720px) {
.planning .grid-wrapper{
  grid-template-columns: 10px 300px 10px;
    justify-content: center;
}
.planning .tuesday {
grid-column: 2;
grid-row: 1;
background-color: #eee;
    border: 5px solid #555;
padding: 70px;

}

Did you notice the media query is still open here? This can lead directly to the swamp of desperation, is time-consuming and ever more disheartening as the number of lines adds up and the mental effort to unwind it becomes greater and greater. More CSS, more problems.

Not to worry! There is a super-simple way to fix this up quickly.

  1. Pre-requisite: using Chrome web browser
  2. Right click anywhere on your website.
  3. Choose ‘inspect’ from the context menu.
  4. In DevTools, select the Sources tab.
  5. On the navigation pane, browse to your CSS source file and click to select.
  6. In the reading pane in the center, look for an icon: {} in the bottom left, just under the line numbers. Click it.

Boom! Your CSS source code has been auto-formatted with proper indentation.

  1. Select all the text of the shiny CSS here in the reading pane (Windows users: CTRL+A).
  2. Copy and paste this into your CSS source file.

With this little process, you can hopefully reduce the number of occasions that CSS causes you grief and stay on top of it!

The Aclonica Font

Bookmarked

Google Fonts

Making the web more beautiful, fast, and open through great typography

Citation

(via Google Fonts)

I saw this Aclonica font in use and noted it for later. I’m now taking the saved link I had in an unpublished draft post and moving it to a public bookmark post-kind. If I had done this in the first place, I may have captured the source where I first saw it in use, but I was still getting my head around post-kinds early on.