Web Design Resources

Thesarus (word finder)

• wordhippo - finds older and specialty words!

Code hightlights

• https://highlightjs.org/usage/

Docs

• https://plantuml.com/
• https://dbdiagram.io/home
• https://www.planttext.com/
• https://plantuml.com/ie-diagram
• https://www.quickdatabasediagrams.com/
• https://graphviz.org/doc/info/lang.html
• https://modeling-languages.com/uml-tools/#textual
• https://mamchenkov.net/wordpress/2015/08/20/graphviz-dot-erds-network-diagrams
• https://towardsdatascience.com/drawing-a-uml-diagram-in-the-vs-code-53c2e67deffe

Logos

• https://logomakr.com/
• https://www.freelogodesign.org/
• https://www.namecheap.com/logo-maker/app/
• https://hatchful.shopify.com/onboarding/pick-space\
• https://svgx.app/?ref=madewithsvelte.com

Slides

• EagleJS - Vue Based
• RevealJS - React Based
• RemarkJS
• GlideJS
• Marp

I’m often looking for a way to make websites more interesting here are a few resources I use:

Drawings

https://themeisle.com/blog/free-illustrations/

• Undraw – free to use drawings in SVG
• manypixels - colors are adjustable!
• stubborn.fun - new
• drawkit
• stories.freepick - with attribution
• illlustrations
• iradesign - can change the colors!
• absurd - funky stuff
• icons8 - images, drawings, photos, Icons!
• humaaans - all about people and lots of adjustments
• grapbox - images, drawings, photos, Icons!
• uistore - mix of stuff

Photos - royalty free (without registration)

• Unsplash
• pexels
• pixabay - (sometimes check if you are a robot :)

Image Editing - Free

• Seashore Mac Store
• Seashore Guide
• Seashore Code
• Gimp - Mac & Linux
• Affinity Photo - paid

Web Drawing

• Sketch - straight forward
• Affinity Desinger - Paid - but also exports SVG

CSS - NextGen

• Windi

• ViteRuby/Rails

• Vite/Windi/Rails

• Vite/Windi/Rails6

• AwesomeVite.js

• RailsViewComponents

• IntroRailsViewComponents

• RailsViewComponents

• RailsViewComponents

• Vite/Phoenix/Article

• Vite/Phoenix/DemoRepo

# learn to build a rails template!
git clone https://github.com/justalever/kickoff_vite_rails.git
rails new project --skip-webpack-install --skip-javascript -m kickoff_vite_rails/template.rb

cd project
bin/rails s
bin/vite dev (in second window or with forman/overmind)

CSS

• Bulma
• tailwindcss
• headlessui
• tailwindui
• tailwindtoolbar

CSS / AlpineJS / StimulusJS

• AplineToolbox

• Night/DayTailwindCSS

• ResponsiveNavBarTailwindCSS

• AccessibleNavWTailwind

• NavBarTailwindCSS

• Vue/Rails6

• Vue/Rails6-WebCrunch

• Vue/RailsAPI-WebCrunch

• Vue/Rails6

• Vue/Rails6/LevelUp

• Vue/Buefy/Rails6

• Buefy-BulmaUI

Icons

• IonIcons
• HeroIcons
• SimpleIcons
• FeatherIcons
• themifyIcons - good variety and brands too
• FontAwesome - Icons; many are completely free
• FontAwesome6
• Noun Project - Icons and photos for all to use (with attribution)
• Octicons - free icons on github
• Glyphicons - Icons in Bootstrap see also: https://getbootstrap.com/docs/3.3/components/
• SimpleIcons
• devicon
• iconic

DB Svelte Tool

• dbgate

SVG Text Logos

Sometimes I find it hard to come up with a good logo, but not a shortname.

Wide larger Logo (for Desktop views)

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 240 45" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font: bold 30px sans-serif; fill: blue;}
    .small { font: italic 25px sans-serif; fill: green; }
  </style>
  <text x="0" y="35" class="heavy" fill="blue">ED</text>
  <text x="41" y="35" class="small" fill="green">gility</text>
</svg>

Small stacked logo (for mobile views)

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font: bold 28px sans-serif; fill: blue;}
    .small { font: italic 18px sans-serif; fill: green; }
  </style>
  <text x="0" y="22" class="heavy" fill="blue">ED</text>
  <text x="0" y="40" class="small" fill="green">gility</text>
</svg>