From 6a0b4cbb5895496ab8e204b5ef04732c4d9fdf1a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Feb 2017 10:26:45 +0800 Subject: ADD: New Documents experience --- docs/utilities.html | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 docs/utilities.html (limited to 'docs/utilities.html') diff --git a/docs/utilities.html b/docs/utilities.html new file mode 100644 index 0000000..183151e --- /dev/null +++ b/docs/utilities.html @@ -0,0 +1,231 @@ + + + + + + + + + Utilities - Spectre.css + + + + + +
+
+ +
+
+ +
+
+
+ +
+
+
+

Position utilities

+
+

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

+
+ +
+<!-- clear float -->
+<div class="clearfix"></div>
+<!-- float: left and right -->
+<div class="float-left"></div>
+<div class="float-right"></div>
+<!-- position: relative, absolute and fixed -->
+<div class="rel"></div>
+<div class="abs"></div>
+<div class="fixed"></div>
+<!-- centered block -->
+<div class="centered"></div>
+<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
+<div class="mt-10"></div>
+<div class="mt-5"></div>
+<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
+<div class="pt-10"></div>
+<div class="pt-5"></div>
+
+
+ +
+

Display utilities

+
+

Display utilities are used for display and hidden things.

+
+ +
+<!-- display: block; -->
+<div class="block"></div>
+<!-- display: inline; -->
+<div class="inline"></div>
+<!-- display: inline-block; -->
+<div class="inline-block"></div>
+<!-- display: flex; -->
+<div class="flex"></div>
+<!-- display: inline-flex; -->
+<div class="inline-flex"></div>
+<!-- display: none; -->
+<div class="hide"></div>
+<!-- visibility: visible; -->
+<div class="visible"></div>
+<!-- visibility: hidden; -->
+<div class="invisible"></div>
+<!-- hide text contents -->
+<div class="text-hide"></div>
+
+
+ +
+

Text utilities

+
+

Text utilities are used for text alignment, styles and overflow things.

+
+ +
+<!-- left-aligned text -->
+<div class="text-left"></div>
+<!-- center-aligned text -->
+<div class="text-center"></div>
+<!-- right-aligned text -->
+<div class="text-right"></div>
+<!-- justified text -->
+<div class="text-justify"></div>
+
+<!-- Lowercased text -->
+<div class="text-lowercase"></div>
+<!-- Uppercased text -->
+<div class="text-uppercase"></div>
+<!-- Capitalized text -->
+<div class="text-capitalize"></div>
+
+<!-- Normal weight text -->
+<div class="text-normal"></div>
+<!-- Bold text -->
+<div class="text-bold"></div>
+<!-- Italicized text -->
+<div class="text-italic"></div>
+<!-- Larger text (120%) -->
+<div class="text-large"></div>
+
+<!-- Overflow behavior: display an ellipsis to represent clipped text -->
+<div class="text-ellipsis"></div>
+<!-- Overflow behavior: truncate the text -->
+<div class="text-clip"></div>
+<!-- Text may be broken at arbitrary points -->
+<div class="text-break"></div>
+
+
+ +
+
+

Shape utilities are used for change element shapes.

+
+ +
+<!-- rounded element -->
+<div class="rounded"></div>
+<!-- circle element -->
+<div class="circle"></div>
+
+
+ +
+

Divider

+
+

A Divider is used for separating elements.

+
+
+
+
+
+
+ +
+<!-- divider element -->
+<div class="divider"></div>
+
+
+ +
+

Loading

+
+

Loading indicator is used for loading or updating. Also, you can add the class loading to buttons for loading status.

+
+
+
+
+
+
+ +
+<!-- loading element -->
+<div class="loading"></div>
+
+
+ +
+
+
+ + + + + -- cgit v1.3.1-23-gd82d