11 design snippets

Tweak letter spacing in TeX/LaTeX

Using the microtype package:

\usepackage{microtype}
%% [...]
Normal Text
\textls[-40]{Condensed Text}
\textls[140]{Expanded Text}
Published 8 Feb 2014
Tagged tex-latex and design.

 

Setting page margins in TeX/LaTeX

Use the geometry package. For example:

\usepackage[top=0.75in,left=0.75in,right=0.75in,bottom=0.75in]{geometry}
Published 8 Feb 2014
Tagged tex-latex and design.

 

Tab-like alignment in TeX/LaTeX using \hfill

To right-align text:

\null\hfill Lorem Ipsum

Left and right aligned text:

Lorem \hfill Ipsum

Multiple columns:

Left \hfill Center \hfill Right

or

Left \hfill Center-Left \hfill Center-Right \hfill Right

etc.

Published 8 Feb 2014
Tagged tex-latex and design.

 

TeX/LaTeX Font Sizes

To change the font size of text in a TeX/LaTeX document, use:

{\size Text to change the size of.}

where \size is one of:

\tiny
\scriptsize
\footnotesize
\small
\normalsize
\large
\Large
\LARGE
\huge
\Huge

Also see http://en.wikibooks.org/wiki/LaTeX/Fonts#Sizing_text for font size metrics and other details.

Published 8 Feb 2014
Tagged tex-latex and design.

 

 

The spectral11 brewer color palette

#9e0142 rgb(158,  1, 66) Eggplant Violet
#d53e4f rgb(213, 62, 79) Valencia Red
#f46d43 rgb(244,109, 67) Crusta (Dark) Orange
#fdae61 rgb(253,174, 97) Rajah (Light) Orange
#fee08b rgb(254,244,139) Cream Brulee (Dark) Yellow
#ffffbf rgb(255,255,191) Lemon Chiffon (Light) Yellow
#e6f598 rgb(230,245,152) Tidal (Pale, Yellow-) Green
#abdda4 rgb(171,221,164) Moss (Pale) Green
#66c2a5 rgb(102,194,165) Puerto Rico (Blue-) Green
#3288bd rgb( 50,136,189) Curious (Muted) Blue
#5e4fa2 rgb( 94, 79,162) Rich (Violet-) Blue

via graphviz.org; more info at mkweb.bcgsc.ca/brewer/

Published 15 Feb 2014
Tagged color-palette and design.

 

The paired12 brewer color palette

#a6cee3 rgb(166,206,227) French Pass (Light) Blue
#1f78b4 rgb( 31,120,180) Pelorous (Dark) Blue
#b2df8a rgb(178,223,138) Feijoa (Light) Green
#33a02c rgb( 51,160, 44) La Palma (Dark) Green
#fb9a99 rgb(251,154,153) Rose Bud (Light) Red (Pink)
#e31a1c rgb(227, 26, 28) Fire Engine (Dark) Red
#fdbf6f rgb(253,191,111) Chardonnay Yellow (Light Orange)
#ff7f00 rgb(255,127,  0) Dark Orange
#cab2d6 rgb(202,178,214) Prelude (Light) Violet
#6a3d9a rgb(106, 61,154) Royal (Dark) Purple
#ffff99 rgb(255,255,153) Canary Yellow (Light "Brown")
#b15928 rgb(177, 89, 40) Rose of Sharon Orange ("Dark" "Brown")

via graphviz.org; more info at mkweb.bcgsc.ca/brewer/

Published 15 Feb 2014
Tagged color-palette and design.

 

Cross-browser CSS transitions

.foo {
  transition:         opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition:    opacity .25s ease-in-out;
  -o-transition:      opacity .25s ease-in-out;
}

Where the right-hand side has the general form:

PROPERTY DURATION [TIMING-FUNCTION] [TRANSITION-DELAY]

Transitions can chained:

 .foo { transition: opacity .25s ease-in-out, height 1s linear }

Transition timing functions

  • linear - constant rate of change between states.

    cubic-bezier(0.0, 0.0, 1.0, 1.0)

  • ease - (the default) slow acceleration, then faster, before rapidly slowing again at the end.

    cubic-bezier(0.25, 0.1, 0.25, 1.0)

  • ease-in-out - like ease but accelerating/decelerating more rapidly (with a shorter transition between acceleration and deceleration).

    cubic-bezier(0.42, 0, 0.58, 1.0)

  • ease-in - equivalent to the first half of ease-in-out; rapid accelerating then transitioning to a constant rate of change at the end.

    cubic-bezier(0.42, 0, 1, 1.0)

  • ease-out - equivalent to the second half of ease-in-out; a constant rate of change transitioning rapid deceleration at the end.

    cubic-bezier(0.42, 0, 0.58, 1.0)

  • cubic-bezier(x1,y1,x2,y2) - follows cubic B├ęzier curve using the control points (0,0), (x1,y1), (x2,y2) and (1,1).

  • steps( n, [start|end] ) - stepwise function with n steps

How to read cubic-bezier functions

Imagine the transition as a stepwise function starting at (0,0) and ending at (1,1) and with two steps in between. The cubic-bezier(x1,y1,x2,y2) function specifies the points in the middle. In other words, x1 and x2 are the times at which the second and third steps happen, respectively (expressed as a fraction of the total transition duration) and y1 and y2 are how far along the transition is at x1 and x2, respectively (expressed as a fraction of the total transition "distance"). Very loosely, the cubic-bezier function "smooths" those steps.

These are nicely demonstrated here.

Tagged css, html, web and design.

 

Presentational CSS Classes

These are the opposite of semantic markup, but I find them useful:

.align-both   { text-align: justify; }
.align-center { text-align: center; }
.align-left   { text-align: left; }
.align-right  { text-align: right; }
.float-left   { float: left; }
.float-right  { float: right; }
.nobr         { white-space: nowrap; }
.small        { font-size: 80%; } /* should really sync with the <small> tag rules */
Tagged css, html, web and design.

 

Fixing CSS Resets

CSS reset frameworks often strip out all formatting. These CSS rules contain some re-resets:

/* I understand the theory behind replacing <i> and <b> with <em> and <strong>, but c'mon, really? */
i     { font-style: italic; }
b     { font-weight: bold; }
small { font-size: 80%; }

/* Make superscripts and subscripts actually do something: */
sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup      {    bottom: 1ex; }
sub      {    top: .5ex; }

/* Mono-spaced types. */
pre, code, kbd, samp, tt { font-family: 'droid sans mono slashed', 'droid sans mono dotted', 'droid sans mono', monospace, monospace; }
Tagged css, html, web and design.

 

Vertically centering block elements with CSS.

Via phrogz.net.

<style type="text/css">
    #wrapper { position:relative; } /* position:absolute is also ok */
    #wrapped { position:absolute; top:50%; height:10em; margin-top:-5em; }  /* margin-top = -1 * height/2 */
</style>
...
<div id="wrapper">
    <div id="wrapped">
        <p>Block content.</p>
        <p>But still vertically centered.</p>
    </div>
</div>
Tagged css, html, web and design.

 

This page was generated at 9:56 PM on 15 Jan 2016.
Copyright © 1999 - 2016 Rodney Waldhoff.