0
# Layout Mixins
1

2
Pre-built styling patterns and utilities for common layout needs, typography effects, accessibility, and responsive design in CSS-in-JS applications.
3

4
## Capabilities
5

6
### Layout and Positioning Mixins
7

8
Essential mixins for layout patterns and element positioning.
9

10
```javascript { .api }
11
/**
12
 * Provides clearfix solution for floating elements
13
 * @param parent - Optional parent selector (default: "&")
14
 * @returns Styles object with clearfix properties
15
 */
16
function clearFix(parent?: string): Styles;
17

18
/**
19
 * Positions an element to cover its parent completely
20
 * @param offset - Optional offset from edges (default: 0)
21
 * @returns Styles object for absolute positioning covering parent
22
 */
23
function cover(offset?: string): Styles;
24

25
/**
26
 * Creates ellipsis text overflow with optional width constraint
27
 * @param width - Optional width constraint (default: "100%")
28
 * @returns Styles object for text ellipsis behavior
29
 */
30
function ellipsis(width?: string): Styles;
31

32
/**
33
 * Enables word wrapping for long words and URLs
34
 * @param wrap - Optional wrap method ("normal" | "break-word" | "break-all")
35
 * @returns Styles object for word wrapping
36
 */
37
function wordWrap(wrap?: string): Styles;
38
```
39

40
**Usage Examples:**
41

42
```javascript
43
import { clearFix, cover, ellipsis, wordWrap } from "polished";
44

45
// Layout utilities
46
const containerStyles = {
47
  ...clearFix(),  // Clear floated children
48
  position: "relative"
49
};
50

51
const overlayStyles = {
52
  ...cover("10px"),  // Cover parent with 10px offset
53
  backgroundColor: "rgba(0,0,0,0.5)"
54
};
55

56
const titleStyles = {
57
  ...ellipsis("200px"),  // Truncate with ellipsis at 200px
58
  fontWeight: "bold"
59
};
60

61
const linkStyles = {
62
  ...wordWrap("break-word")  // Break long URLs appropriately
63
};
64
```
65

66
### Responsive and Fluid Design
67

68
Mixins for responsive design patterns and fluid layouts.
69

70
```javascript { .api }
71
/**
72
 * Creates fluid ranges for responsive design with CSS calc()
73
 * @param cssProp - Configuration object(s) for fluid range properties
74
 * @param minScreen - Minimum screen size (default: "320px")
75
 * @param maxScreen - Maximum screen size (default: "1200px")
76
 * @returns Styles object with fluid range calculations
77
 */
78
function fluidRange(
79
  cssProp: FluidRangeConfiguration | FluidRangeConfiguration[],
80
  minScreen?: string,
81
  maxScreen?: string
82
): Styles;
83

84
/**
85
 * Creates CSS between two screen sizes using media queries
86
 * @param fromSize - Starting screen size
87
 * @param toSize - Ending screen size
88
 * @param cssProp - CSS properties to apply within range
89
 * @returns Styles object with media query
90
 */
91
function between(fromSize: string, toSize: string, cssProp: Styles): Styles;
92

93
/**
94
 * Provides high-DPI (retina) display targeting
95
 * @param ratio - DPI ratio to target (default: 1.3)
96
 * @returns Styles object with high-DPI media query
97
 */
98
function hiDPI(ratio?: number): Styles;
99
```
100

101
**Usage Examples:**
102

103
```javascript
104
import { fluidRange, between, hiDPI } from "polished";
105

106
// Fluid typography that scales with viewport
107
const fluidText = {
108
  ...fluidRange(
109
    [
110
      { prop: "fontSize", fromSize: "14px", toSize: "18px" },
111
      { prop: "lineHeight", fromSize: "1.4", toSize: "1.6" }
112
    ],
113
    "320px", "1200px"
114
  )
115
};
116

117
// Styles only between specific screen sizes
118
const tabletStyles = {
119
  ...between("768px", "1024px", {
120
    fontSize: "16px",
121
    padding: "20px"
122
  })
123
};
124

125
// High-resolution display optimizations
126
const retinaStyles = {
127
  ...hiDPI(2, {
128
    backgroundImage: "url('logo@2x.png')",
129
    backgroundSize: "contain"
130
  })
131
};
132
```
133

134
### Typography and Text Effects
135

136
Mixins for typography styling and text visual effects.
137

138
```javascript { .api }
139
/**
140
 * Hides text content while keeping it accessible to screen readers
141
 * @returns Styles object for accessible text hiding
142
 */
143
function hideText(): Styles;
144

145
/**
146
 * Visually hides element while keeping it accessible to screen readers
147
 * @returns Styles object for accessible element hiding
148
 */
149
function hideVisually(): Styles;
150

151
/**
152
 * Provides comprehensive font-face declaration
153
 * @param fontFamily - Font family name
154
 * @param fontFilePath - Path to font file (without extension)
155
 * @param fileFormats - Array of font formats to include
156
 * @param fontWeight - Font weight (default: "normal")
157
 * @param fontStyle - Font style (default: "normal")
158
 * @param fontStretch - Font stretch (default: "normal")
159
 * @param fontDisplay - Font display strategy (default: "auto")
160
 * @param fontVariationSettings - Font variation settings
161
 * @param fontFeatureSettings - Font feature settings
162
 * @param unicodeRange - Unicode range for font
163
 * @param fontVariant - Font variant
164
 * @param fontStretch - Font stretch value
165
 * @returns Styles object with @font-face declaration
166
 */
167
function fontFace(
168
  fontFamily: string,
169
  fontFilePath: string,
170
  fileFormats?: Array<string>,
171
  fontWeight?: string,
172
  fontStyle?: string,
173
  fontStretch?: string,
174
  fontDisplay?: string,
175
  fontVariationSettings?: string,
176
  fontFeatureSettings?: string,
177
  unicodeRange?: string,
178
  fontVariant?: string
179
): Styles;
180
```
181

182
### Visual Effects and Graphics
183

184
Mixins for gradients, shapes, and visual styling patterns.
185

186
```javascript { .api }
187
/**
188
 * Creates CSS linear gradient
189
 * @param options - Gradient configuration object
190
 * @returns Linear gradient CSS value
191
 */
192
function linearGradient(options: LinearGradientConfiguration): string;
193

194
/**
195
 * Creates CSS radial gradient
196
 * @param options - Gradient configuration object
197
 * @returns Radial gradient CSS value
198
 */
199
function radialGradient(options: RadialGradientConfiguration): string;
200

201
/**
202
 * Creates CSS triangle using borders
203
 * @param options - Triangle configuration object
204
 * @returns Styles object for triangle shape
205
 */
206
function triangle(options: TriangleConfiguration): Styles;
207

208
/**
209
 * Provides retina image background with fallback
210
 * @param filename - Base filename (without @2x suffix)
211
 * @param backgroundSize - Background size value
212
 * @param extension - File extension (default: "png")
213
 * @param retinaFilename - Optional custom retina filename
214
 * @param retinaSuffix - Retina filename suffix (default: "@2x")
215
 * @returns Styles object with retina image handling
216
 */
217
function retinaImage(
218
  filename: string,
219
  backgroundSize?: string,
220
  extension?: string,
221
  retinaFilename?: string,
222
  retinaSuffix?: string
223
): Styles;
224
```
225

226
**Usage Examples:**
227

228
```javascript
229
import { linearGradient, triangle, retinaImage } from "polished";
230

231
// Gradient backgrounds
232
const heroBackground = {
233
  background: linearGradient({
234
    colorStops: ["#667eea 0%", "#764ba2 100%"],
235
    toDirection: "to right"
236
  })
237
};
238

239
// CSS triangle shapes
240
const tooltipArrow = {
241
  ...triangle({
242
    pointingDirection: "top",
243
    width: "10px",
244
    height: "8px",
245
    foregroundColor: "#333"
246
  }),
247
  position: "absolute",
248
  bottom: "-8px"
249
};
250

251
// Retina image handling
252
const logoStyles = {
253
  ...retinaImage("logo", "100px 50px", "png"),
254
  display: "block",
255
  width: "100px",
256
  height: "50px"
257
};
258
```
259

260
### Animation and Timing
261

262
Mixins for animation utilities and timing functions.
263

264
```javascript { .api }
265
/**
266
 * Provides collection of timing functions for animations
267
 * @returns Object containing various timing function definitions
268
 */
269
function timingFunctions(): TimingFunctions;
270
```
271

272
### CSS Reset and Normalization
273

274
Mixins for CSS normalization and reset patterns.
275

276
```javascript { .api }
277
/**
278
 * Provides CSS normalization rules
279
 * @returns Styles object with normalize.css-style rules
280
 */
281
function normalize(): Styles;
282
```
283

284
## Types
285

286
```javascript { .api }
287
interface Styles {
288
  [key: string]: string | number | Styles;
289
}
290

291
interface FluidRangeConfiguration {
292
  prop: string;
293
  fromSize: string;
294
  toSize: string;
295
}
296

297
interface LinearGradientConfiguration {
298
  colorStops: Array<string>;
299
  toDirection?: string;
300
  fallback?: string;
301
}
302

303
interface RadialGradientConfiguration {
304
  colorStops: Array<string>;
305
  extent?: string;
306
  position?: string;
307
  shape?: string;
308
  fallback?: string;
309
}
310

311
interface TriangleConfiguration {
312
  pointingDirection: "top" | "right" | "bottom" | "left" | 
313
                     "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
314
  width: string;
315
  height: string;
316
  foregroundColor: string;
317
  backgroundColor?: string;
318
}
319

320
interface TimingFunctions {
321
  [key: string]: string;
322
}
323
```