All Projects → ZeroSpree → Cssans.pro

ZeroSpree / Cssans.pro

Licence: mit
CSSans Pro - The Colourful, Sassy, CSS Font

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Cssans.pro

U8g2
U8glib library for monochrome displays, version 2
Stars: ✭ 2,737 (+986.11%)
Mutual labels:  font
Amiri
Amiri Font Project.
Stars: ✭ 227 (-9.92%)
Mutual labels:  font
Typography
C# Font Reader (TrueType / OpenType / OpenFont / CFF / woff / woff2) , Glyphs Layout and Rendering
Stars: ✭ 246 (-2.38%)
Mutual labels:  font
Scsscale
Typographic modular scale starter based on body's font-size built on SCSS.
Stars: ✭ 206 (-18.25%)
Mutual labels:  font
Hack
A typeface designed for source code
Stars: ✭ 14,543 (+5671.03%)
Mutual labels:  font
Typefaces
NPM packages for Open Source typefaces
Stars: ✭ 2,581 (+924.21%)
Mutual labels:  font
Yrsa Rasa
Yrsa & Rasa: fonts for Latin and Gujarati
Stars: ✭ 200 (-20.63%)
Mutual labels:  font
Amstelvar
a parametric variable font by David Berlow
Stars: ✭ 251 (-0.4%)
Mutual labels:  font
You Dont Need Javascript
CSS is powerful, you can do a lot of things without JS.
Stars: ✭ 16,514 (+6453.17%)
Mutual labels:  font
Playfair Display
Playfair Display is an Open Source typeface family for display and titling use.
Stars: ✭ 237 (-5.95%)
Mutual labels:  font
Operator Mono Lig
Add ligatures to Operator Mono similar to Fira Code
Stars: ✭ 2,683 (+964.68%)
Mutual labels:  font
Gohufont
A monospace bitmap font.
Stars: ✭ 224 (-11.11%)
Mutual labels:  font
React Native Responsive Fontsize
🔠 Responsive fontSize based on screen-size of the device in React-Native
Stars: ✭ 238 (-5.56%)
Mutual labels:  font
Picasso
Picasso is a high quality 2D vector graphic rendering library. It support path , matrix , gradient , pattern , image and truetype font.
Stars: ✭ 205 (-18.65%)
Mutual labels:  font
Cherry
another bitmap font
Stars: ✭ 244 (-3.17%)
Mutual labels:  font
Optician Sans
Typeface based on the historical eye charts and optotypes used by opticians world wide.
Stars: ✭ 203 (-19.44%)
Mutual labels:  font
Neodgm
Modern TrueType font based on an old-but-good Korean bitmap font.
Stars: ✭ 230 (-8.73%)
Mutual labels:  font
Fontedit
A desktop app to import, edit and export fonts as byte arrays for use in embedded systems
Stars: ✭ 251 (-0.4%)
Mutual labels:  font
Iterm Fish Fisher Osx
Complete guide and Bash script to install Command Line Tools + Homebrew + iTerm2 + Fish Shell + Fisher + Plugins for development purposes
Stars: ✭ 249 (-1.19%)
Mutual labels:  font
Firamath
Sans-serif font with Unicode math support
Stars: ✭ 238 (-5.56%)
Mutual labels:  font

CSSans Pro - The Colourful, Sassy, CSS Font

Font specimen

CSSans Pro is a just-for-fun CSS project by Andronache Izabela and Codrin Pavel.

Table of Contents

Overview

Uppercase

  • A - Z <b class="cssans:LETTER"></b>

Lowercase

  • a - z <b class="cssans:letter"></b>

Numbers

  • 0 - 9 <b class="cssans:NUMBER"></b>

Symbols

Escaped Symbols

  • ` <b class="cssans:%60"></b>
  • ^ <b class="cssans:%5E"></b>
  • % <b class="cssans:%25"></b>
  • [ <b class="cssans:%5B"></b>
  • ] <b class="cssans:%5D"></b>
  • { <b class="cssans:%7B"></b>
  • } <b class="cssans:%7D"></b>
  • " <b class="cssans:%22"></b>
  • < <b class="cssans:%3C"></b>
  • > <b class="cssans:%3E"></b>
  • \ <b class="cssans:%5C"></b>
  • | <b class="cssans:%7C"></b>

Quick Start

Grab the minified CSS file from the repo:

Add in some example HTML markup:

<div class="cssans cssans--center">
    <div class="cssans__accessible">CSSans Pro</div>

    <div class="cssans__word">
        <b class="cssans:C"></b>
        <b class="cssans:S"></b>
        <b class="cssans:S"></b>
        <b class="cssans:a"></b>
        <b class="cssans:n"></b>
        <b class="cssans:s"></b>
    </div>

    <div class="cssans__word">
        <b class="cssans:P"></b>
        <b class="cssans:r"></b>
        <b class="cssans:o"></b>
    </div>
</div>

... profit!

Here's a quick breakdown:

  • Each character is a single element with a class of cssans:CHAR
  • Each individual word goes inside a .cssans__word container. This will make sure all text is being spaced properly.
  • For improved accessibility, you should add the original text in a .cssans__accessible container. Definitely read this
  • CSSans Pro provides some options and built-in helper classes such as .cssans--center. See more Options

Quick start - JavaScript version

Grab the minified CSS and JS files from the repo:

Add in some example HTML markup:

<div id="foo">CSSans Pro</div>

Call CSSans(element, text)

var element = document.getElementById('foo');
var text = element.innerText;
CSSans(element, text);

You can grab the unminified CSSans() function from /_src/cssans/js/cssans.js to see what's going on in there. Nothing much, really, feel free to make your own.

Options

Colors

The color pallete is controlled by 5 CSS variables written as --cssans-**WHICHCOLOR**: **R**, **G**, **B**.

This notation uses only the color values, without the rgb() syntax.

--cssans-primary: 31, 51, 104;    // blue
--cssans-secondary: 237, 21, 118; // pink
--cssans-accent1: 43, 208, 247;   // light blue
--cssans-accent2: 255, 92, 92;    // orange
--cssans-accent3: 255, 216, 9;    // yellow

Letter-spacing

--cssans-letter-spacing: 0.1em;

Word-spacing

--cssans-word-spacing: 1em;

Line-height

--cssans-line-height: 1.1em;

Align: center

Use the cssans--center class on the container that holds your font markup.

This class will make sure all words align properly in the middle of the parent container.

Simply setting text-align:center; won't do quite as well since words are separated by margins.

<div class="cssans--center">
    <div class="cssans__word">...</div>
</div>

Align: right

Use the cssans--right class on the container that holds your font markup.

This class will help you properly align text to the right side of the parent container.

<div class="cssans--right">
    <div class="cssans__word">...</div>
</div>

Italic (slanted)

Use the cssans--slanted class on the container that holds your font markup to give the font an italicized look.

Note: this class literally adds transform: skew(-15deg); to each .cssans__word. Feel free to experiment 👍

<div class="cssans--slanted">
    <div class="cssans__word">...</div>
</div>

Browser support

CSSans Pro can work on older browsers that don't support CSS Custom Properties. Here's a few ways to do that, pick the one that suits best:

  • Use the prebuilt IE compatible version of CSSans Pro /dist/cssans.min.ie.css - this file contains no CSS Variables, all the code is precompiled to normal CSS properties. Feel free to find/replace all colors and spacings you'd like to customize.

  • Install the repo locally and build your own version of cssans.min.ie.css or...

  • Use a polyfil, such as css-vars-ponyfill

Accessibility

You don't need to read this if you use the CSSans() JavaScript function.

CSSans Pro is made out of CSS shapes that screen readers and other assistive technologies cannot identify.

In order to keep your site accessible, please use the built-in .cssans__accessible class. It's really easy, look:

<div class="cssans__accessible">I can be read by a screen reader, hurray!</div>

Installation

  1. You will need a working Jekyll environment and NPM installed on your machine. Once you have installed NPM, you will need to install gulp into your global root directory if you haven't already with npm install -g gulp. Make sure these are working on your system before proceeding.

  2. Clone the repo

  3. Install dependencies with npm install

  4. Run gulp

At this point, BrowserSync should open a new browser tab at http://localhost:3000 and you're good to go!

The repository contains all the files for CSSans Pro, as well as the presentation site.

You can find the font files under _src/cssans/sass/. All the CSS Custom Properties are set in _common.scss.

The dist directory should update on-the-fly as you update the files, so you can grab the minified files from the _dist folder as soon as you finish editing.

Have fun!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].