❤
npm
Sign UpSign In

nuclear-typography

1.0.0 • Public • Published

Typesetting for Nuclear css

Font

Specifies the font for an element.

  • family-name - The name of a font-family, like "times", "arial", etc.
  • generic-family - The name of a generic-family, like "serif", "sans-serif".

Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

:root {
  --font-family: 'PT Sans', sans-serif;
  --monospace-font-family: 'Source Code Pro', Consolas, monospace;
}
.ff   { font-family: var(--font-family); }
.ff-m { font-family: var(--monospace-font-family); }
<body class="ff">
  hidden
</body>

Font style

Specifies the font style for a text.

  • normal - The browser displays a normal font style. This is default.
  • italic - The browser displays an italic font style.
  • oblique - The browser displays an oblique font style.
.fs-n { font-style: normal; }
.fs-i { font-style: italic; }
.fs-o { font-style: oblique; }
<i class="fs-i">Italics</i>

Font variant

Specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

  • normal - The browser displays a normal font. This is default.
  • small-caps - The browser displays a small-caps font.
.fv-n  { font-variant: normal; }
.fv-sc { font-variant: small-caps; }
<h3 class="h3 fv-sc">Small caps heading</h3>

Font weight

Sets how thick or thin characters in text should be displayed.

  • normal - Defines normal characters. This is default.
  • bold - Defines thick characters.
  • bolder - Defines thicker characters.
  • lighter - Defines lighter characters.
  • number - Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
.fw-n  { font-weight: normal; }
.fw-b  { font-weight: bold; }
.fw-br { font-weight: bolder; }
.fw-lr { font-weight: lighter; }
<strong class="fw-b">Bold text</strong>

Font size

Sets the size of a font.

length - Sets the font-size to a fixed size in px, cm, etc. % - Sets the font-size to a percent of the parent element's font size.

:root {
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
}
.h0 { font-size: calc(var(--h2) * 2); }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.h4 { font-size: var(--h4); }
.h5 { font-size: var(--h5); }
.h6 { font-size: var(--h6); }
<h1 class="h0">Heading</h1>

List properties

List

Sets all the list properties in one declaration.

  • list-style-type - Specifies the type of list-item marker.
  • list-style-position - Specifies where to place the list-item marker.
  • list-style-image - Specifies the type of list-item marker.

Note: If one of the values above are missing, e.g. list-style: circle inside; the default value for the missing property will be inserted, if any.

.lis-n { list-style: none; }
<ul class="lis-n">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List position

Specifies if the list-item markers should appear inside or outside the content flow.

  • inside - Indents the marker and the text. The bullets appear inside.
  • outside - Default. Keeps the marker to the left of the text.
.lisp-i { list-style-position: inside; }
.lisp-o { list-style-position: outside; }
<ul class="lisp-i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List style type

Specifies the type of list-item marker in a list.

  • disc - Default value. The marker is a filled circle.
  • armenian - The marker is traditional Armenian numbering.
  • circle - The marker is a circle.
  • cjk-ideographic - The marker is plain ideographic numbers.
  • decimal - The marker is a number.
  • decimal-leading-zero - The marker is a number with leading zeros (01, 02, 03).
  • georgian - The marker is traditional Georgian numbering.
  • hebrew - The marker is traditional Hebrew numbering.
  • hiragana - The marker is traditional Hiragana numbering.
  • hiragana-iroha - The marker is traditional Hiragana iroha numbering.
  • katakana - The marker is traditional Katakana numbering.
  • katakana-iroha - The marker is traditional Katakana iroha numbering.
  • lower-alpha - The marker is lower-alpha (a, b, c, d, e, etc.).
  • lower-greek - The marker is lower-greek.
  • lower-latin - The marker is lower-latin (a, b, c, d, e, etc.).
  • lower-roman - The marker is lower-roman (i, ii, iii, iv, v, etc.).
  • none - No marker is shown.
  • square - The marker is a square.
  • upper-alpha - The marker is upper-alpha (A, B, C, D, E, etc.).
  • upper-latin - The marker is upper-latin (A, B, C, D, E, etc.).
  • upper-roman - The marker is upper-roman (I, II, III, IV, V, etc.).
.list-n    { list-style-type: none; }
.list-d    { list-style-type: disc; }
.list-c    { list-style-type: circle; }
.list-s    { list-style-type: square; }
.list-dc   { list-style-type: decimal; }
.list-dclz { list-style-type: decimal-leading-zero; }
.list-lr   { list-style-type: lower-roman; }
.list-ur   { list-style-type: upper-roman; }
<ul class="lisp-i list-c">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List style image

Replaces the list-item marker with an image.

  • none - Default. No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered.
  • url - The path to the image to be used as a list-item marker.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

:root {
  --list-style-image-1: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-2: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-3: url(http://placehold.it/20/ffffff/000000);
  --list-style-image-4: url(http://placehold.it/20/ffffff/000000);
}
.lisi-n { list-style-image: none; }
.lisi-1 { list-style-image: var(--list-style-image-1); }
.lisi-2 { list-style-image: var(--list-style-image-2); }
.lisi-3 { list-style-image: var(--list-style-image-3); }
.lisi-4 { list-style-image: var(--list-style-image-4); }
<ul class="lisp-i lisi-1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Text properties

Text align

Specifies the horizontal alignment of text in an element.

  • left - Aligns the text to the left.
  • right - Aligns the text to the right.
  • center - Centers the text.
  • justify - Stretches the lines so that each line has equal width.
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }
<div class="ta-c">
  Centred text
</div>

Text decoration

Specifies the decoration added to text.

  • none - Defines a normal text. This is default.
  • underline - Defines a line below the text.
  • overline - Defines a line above the text.
  • line-through - Defines a line through the text.

Note: In CSS3, the text-decoration property is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this is currently not supported in any of the major browsers. Note: In CSS3 you can use the text-decoration-color property to change the color of the decoration, otherwise the color is the same as the color of the text.

.td-n { text-decoration: none; }
.td-u { text-decoration: underline; }
.td-o { text-decoration: overline; }
.td-l { text-decoration: line-through; }
<a class="td-n">Hyperlink without an underline</a>

Text transform

Controls the capitalization of text.

  • none - No capitalization. The text renders as it is. This is default.
  • capitalize - Transforms the first character of each word to uppercase.
  • uppercase - Transforms all characters to uppercase.
  • lowercase - Transforms all characters to lowercase.
.tt-n { text-transform: none; }
.tt-c { text-transform: capitalize; }
.tt-u { text-transform: uppercase; }
.tt-l { text-transform: lowercase; }
<h3 class="h3 tt-u">Uppercase heading</h3>

Text indent

Specifies the indentation of the first line in a text-block.

  • length - Defines a fixed indentation in px, pt, cm, em, etc. Default is 0.
  • % - Defines the indentation in % of the width of the parent element.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

.ti-- { text-indent: -9999px; }

Text overflow

Specifies how overflowed content that is not displayed should be signaled to the user.

  • clip - Default value. Clips the text.
  • ellipsis - Render an ellipsis ("...") to represent clipped text.
  • string - Render the given string to represent clipped text.
.tov-e { text-overflow: ellipsis; }
<ul>
  <li class="tov-e ov-h whs-nw">
    This example uses other nuclear modules to clip text
  </li>
</ul>

Text shadow

Adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.

  • h-shadow - Required. The position of the horizontal shadow.
  • v-shadow - Required. The position of the vertical shadow.
  • blur-radius - Optional. The blur radius. Default value is 0.
  • color - Optional. The color of the shadow.
  • none - Default value. No shadow.

Note: Negative values are allowed for h-shadow and v-shadow

:root {
  --h-shadow: 0;
  --v-shadow: 0;
  --blur-radius: 0;
  --colour: rgba(0, 0, 0, .5);
  --text-shadow: var(--h-shadow) var(--v-shadow) var(--blur-radius) var(--colour);
}
.tsh   { text-shadow: var(--text-shadow); }
.tsh-n { text-shadow: none; }

Typesetting

Kerning

Increases or decreases the space between characters in a text.

  • normal - No extra space between characters. This is default.
  • length - Defines an extra space between characters. Negative values allowed.
:root {
  --letter-spacing-1: .1em;
  --letter-spacing-2: .2em;
  --letter-spacing-3: .3em;
  --letter-spacing-4: .4em;
}
.lts-n { letter-spacing: normal; }
.lts-1 { letter-spacing: var(--letter-spacing-1); }
.lts-2 { letter-spacing: var(--letter-spacing-2); }
.lts-3 { letter-spacing: var(--letter-spacing-3); }
.lts-4 { letter-spacing: var(--letter-spacing-4); }

Leading

Specifies the line height.

  • normal - A normal line height. This is default.
  • number - A number that will be multiplied with the current font size.
  • length - A fixed line height in px, pt, cm, etc.
  • % - A line height in percent of the current font size.

Note: Negative values are not allowed.

:root {
  --line-height-1: .75;
  --line-height-2: 1;
  --line-height-3: 1.25;
  --line-height-4: 1.5;
}
.lh-1 { line-height: var(--line-height-1); }
.lh-2 { line-height: var(--line-height-2); }
.lh-3 { line-height: var(--line-height-3); }
.lh-4 { line-height: var(--line-height-4); }

Tracking

Increases or decreases the white space between words.

  • normal - Defines normal space between words (0.25em). This is default.
  • length - Defines an additional space between words (in px, pt, cm, em, etc).

Note: Negative values are allowed.

:root {
  --word-spacing-1: .1em;
  --word-spacing-2: .2em;
  --word-spacing-3: .3em;
  --word-spacing-4: .4em;
}
.wos-1 { word-spacing: var(--word-spacing-1); }
.wos-2 { word-spacing: var(--word-spacing-2); }
.wos-3 { word-spacing: var(--word-spacing-3); }
.wos-4 { word-spacing: var(--word-spacing-4); }

White space

Specifies how white-space inside an element is handled.

  • normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
  • nowrap - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
  • pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
  • pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
  • pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.
.whs-n  { white-space: normal; }
.whs-nw { white-space: nowrap; }
.whs-p  { white-space: pre; }

Hyphens

Specifies line breaking rules for non-CJK scripts.

  • normal - Default value. Break words according to their usual rules.
  • break-all - Lines may break between any two letters.
  • keep-all - Breaks are prohibited between pairs of letters.

Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.

.wob-k { word-break: keep-all; }

Readme

Keywords

Package Sidebar

Install

npm i nuclear-typography

Repository

github.com/djmsutherland/nuclearcss

Homepage

github.com/djmsutherland/nuclearcss#readme

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • djmsutherland
Try on RunKit
Report malware