• Stars
    star
    461
  • Rank 95,028 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 4 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

https://coding-fonts.css-tricks.com/

Coding Fonts

A microsite that shows off fonts designed for writing code.

https://coding-fonts.css-tricks.com/

Running this site.

  • Install dependencies: npm install
  • Start server: npm run dev

Adding a font

  • Start server (see above)
  • If the font is open source, put a copy of the font in the fonts folder. At the very least a .woff2 file in a folder of the fonts name. e.g. /src/assets/fonts/NewFont/NewFont.woff2
  • Make a stylesheet that gets that font ready to use in that font folder. e.g. /src/assets/fonts/NewFont/NewFont.css
  • Add a file like new-font.md to /src/fonts. Add the font's information. Mark the URL of the stylesheet from the previous step in the stylesheet_url field, relative to /src/assets/fonts/. If the URL is absolute, i.e. not added to the repo, add a stylesheet_absolute: true field. See this one as an example.
  • To preview what will be screenshot, the URL structure is like: http://localhost:8080/code_samples/html/?font=anonymous-pro&theme=dark where font matches the kebab-case Title of the Markdown file that you created.
  • Take screenshots! This is a local-only process. Follow the taking screenshots instructions in the command line.
  • Make a Pull Request for it. You should be able to see a built preview on Netlify as part of the PR.

Taking Screenshots

You can take screenshots using the included takeScreenshots.js file. The options are listed in the help screen below.

Options:
  --version    Show version number
  -f, --font   Font to use for screenshots
  -l, --lang   Code sample to use for screenshot
  -t, --theme  Theme to use for screenshots
  --parallel   Run the screenshots in parallel
  -h, --help   Show help

--font, --lang, and --theme all accept the 'all' keyword to handle taking screenshots of all of their respective data points.

The --parallel flag allows the running of Puppeteer in parallel which is useful if you need to repeatedly take screenshots of a font. Do note that this will spawn as many Puppeteer instances as you have the total permutations you request. Take the following command for example.

node takeScreenshots.js -f source-code-pro -l all -t all

It will spawn 8 Puppeteer instances (1 font * 4 languages * 2 themes = 8 instances) all at once to take the screenshots. This is usually fine and doesn't result in any issues but in the event you were to do this for all fonts as well, you'd spawn hundreds of instances which will almost always in a failure.

Additional Examples

# Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.
node takeScreenshots.js -f source-code-pro -l js -t dark

# Take a screenshot of the Menlo font, using all of the code samples, and the light theme.
node takeScreenshots.js -f menlo -l all -t light

# Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.
node takeScreenshots.js -f all -l all -t all

# Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel
node takeScreenshots.js -f input -l all -t all --parallel

More Repositories

1

AnythingSlider

A jQuery Slider plugin for anything.
CSS
1,148
star
2

serverless

The Power of Serverless for Front-End Developers
Astro
472
star
3

The-Printliminator

JavaScript
359
star
4

MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
JavaScript
281
star
5

conferences

A public list of upcoming conferences https://conferences.css-tricks.com/
Nunjucks
236
star
6

AnythingZoomer

Zoom in on images or content
HTML
207
star
7

Relevant-Dropdowns

JavaScript
131
star
8

DragAvatar

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping
JavaScript
74
star
9

Equalizer

Equalize column heights across multiple rows
JavaScript
70
star
10

Shapes-Of-CSS

Bunch of shapes you can make with only one element
64
star
11

Chat2

Chatroom with jQuery, PHP, and text files
PHP
54
star
12

Slide-to-Unlock

Replicating the iPhone's slide to unlock feature
JavaScript
44
star
13

jQuery-Organic-Tabs

Click the tabs to swap out content below, but the area fluidly adjusts in size to the new content, rather than jerk up or down.
HTML
34
star
14

Grid-Accordion

jQuery Accordion that works both vertically and horizontally as a table of cells
JavaScript
32
star
15

MagicLine

Navigation where the highlight follows the mouse
JavaScript
22
star
16

AnythingSlider-Themes

Extra themes for AnythingSlider
JavaScript
19
star
17

api-for-friendly-words

JavaScript
19
star
18

jQuery-Circulate-Plugin

Makes things go what in a circle n'everything.
18
star
19

BuildYourSocialPage

12
star
20

Dynamic-Page

JavaScript
12
star
21

build-process

CSS
11
star
22

View-Source-Button

Using jQuery, Code Prettify, and CSS3 :target, we can make a button that pops up a nice looking view of the current pages source code.
JavaScript
10
star
23

Indeterminate-Checkboxes

Checkboxes actually have three visual states: checked, unchecked, and indeterminate (even back to IE 6). The indeterminate state can only be set by JavaScript. This demo is of a set of nested checkboxes, a common use case for this third visual state.
9
star
24

Select-Cutoff-Fix

jQuery solution to IE 7/8 problem where select menus with fixed widths don't display wider options
8
star
25

Rotating-Feature-Boxes

Boxes rotate depending on what is selected. The featured box has extra displayed information.
8
star
26

Step-by-Step-Seminar-Registration

As different "steps" of the registration process are completed, the current step gets check off as done and the next step lights up. Includes some very basic form validation.
JavaScript
8
star
27

mod_anythingslider

Joomla 2.5 Mod for AnythingSlider by Ken Adam
PHP
5
star
28

quotes

QuotesOnDesign.com
PHP
4
star
29

AnythingSlider-Fx-Builder

Fx builder bookmarklet for AnythingSlider
JavaScript
4
star
30

css-webring

3
star