Category: Graphic Design

Blade Icons

TheSmithy

Blade Icons

A package to easily make use of SVG icons in your Laravel Blade views. Originally “Blade SVG” by Adam Wathan.

Turn…

<!-- camera.svg -->
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>

Into…

<x-icon-camera class="w-6 h-6" />

Or into…

@svg('camera', 'w-6 h-6')

Search all 84,305 Blade Icons:

https://blade-ui-kit.com/blade-icons#search

But for a better overview you may want to go to the homepages of the icons set instead. For example:

https://heroicons.com/

Read More

Nord – An arctic, north-bluish color palette.

TheSmithy

https://www.nordtheme.com/

Nord consists of four named color palettes providing different syntactic meanings and color effects for dark & bright ambiance designs.

It has been created for clear, uncluttered and elegant designs following a minimal and flat style pattern.
For syntax highlighting it aims to ensure an undisturbed focus on important parts of the code, a good readability and a quick visual distinction between the different syntax elements.

All colors are numbered from nord0 to nord15 where each palette contains a different amount of colors. The naming convention preserves the compatibility for terminal color schemes and allows an uncomplicated use as base for such.

Color Palettes

TheSmithy

Before listing the tools, read this article: Building your color palette
In short: almost every online generated color palette consists of a limited number of colors. However, you cannot build an application or website with just 5 colors. You Need:

  • Greys – In practice, you want 8-10 shades to choose from
  • 1 or 2 Primary color(s) – you need a variety (5-10) of lighter and darker shades to choose from
  • Accent colors – it’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI

So what you actually need is something like this:

Read More

Fonts

TheSmithy

Source: awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face

Basically, there are two implementation models:

1. Web font embedding services

2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase. Read More