Alan's Font and Color Picker
I'm not good at visualizing how font samples and colors chips will look on an actual page. It's just not a skill I have.
I can, however, build web pages. I made this one to experiment in a way I can wrap my head around. Move the sliders or change the fonts and the page updates in place. No visualization required.
I hope you find it as useful as I do.
-a
WORK IN PROGRESS
The basics are in place. I've got a bunch of other ideas too. The list is further down. Before that, here's some content to look at for reference.
HARVARD SENTENCES
What follows are some Harvard Sentences. The they are:
a collection of 720 sample phrases, divided into lists of 10, used for standardized testing of Voice over IP, cellular, and other telephone systems.
I use them for placeholder text. They feel more natural than any of the various forms of lorem ipsum. I wish there was more variation in the length though. I'm going to grab lines from Project Gutenberg at some point to address that. I'll add those to the collection of examples I'm putting together when I do.
In the mean time, here are those sentences:
WORDS, WORDS, WORDS
Rice is often served in round bowls. The box was thrown beside the parked truck. The source of the huge river is the clear spring.
The salt breeze came across from the sea. Two blue fish swam in the tank. The colt reared and threw the tall rider. It snowed, rained, and hailed the same morning. Take the winding path to reach the lake.
The wide road shimmered in the hot sun. Lift the square stone over the fence. The frosty air passed through the coat.
The pencils have all been used. The sofa cushion is red and of light weight. The jacket hung on the back of the wide chair.
- Weave the carpet on the right hand side.
- The cup cracked and spilled its contents.
Corn cobs can be used to kindle a fire. Where were they when the noise started. The paper box is full of thumb tacks.
The petals fall with the next puff of wind. Bring your best compass to the third class.
TODO List (in no particular order):
- [x] - Add background color changer
- [x] - Add body text color changer
- [x] - Add header color changer
- [x] - Add header 2 color changer
- [x] - Add link color changer
- [x] - Add text font picker
- [x] - Add header font picker
- [x] - Get arrow keys to work on font pickers
- [x] - Add accent text or area
- [ ] - Setup text input of color values
- [ ] - Output hex colors
- [ ] - Add contrast accessibility checks
- [ ] - Provide complenentary colors automatically
- [ ] - Add a background frame
- [ ] - Add in alpha (which is currently hard coded to 1)
- [ ] - Provide a single output stylesheet
- [ ] - Add scroll to sidebar so you can adjust the parts you want from wherever
- [ ] - Add some images
- [ ] - Create multiple example layouts
- [ ] - Create starter color sets
- [ ] - Add font weights and styles
- [ ] - Add a button to dim the color pickers to help prevent overpowering the primary colors
- [ ] - Keep a list of recent fonts and put them up top
- [ ] - Save snapshots for comparisons
- [ ] - URL generation to send links with settings
- [ ] - Align font selector under text box
- [ ] - Reimplement swap between body and text, etc...
- [ ] - Add different types of color pickers
- [ ] - Put stuff in local storage so it's there when you come back
- [ ] - Add button to link level on and level 2 headers
- [ ] - Add show/hide to the color pickers so to make it easier to see the ones you're working on
- [ ] - Add buttons to swap colors up and down