capquadrat v0.1.0
capquadrat
Toolkit for writing responsive CSS styles in a concise, convenient manner. Aimed at being used in combination with CSS as Javascript libraries, such as Emotion or styled-components.
Requirements
This library requires ES6 and support for private class properties and methods.
Usage
Defining breakpoints
First, you must define the breakpoint sizes that make sense for your application. You do so by creating an instance of the Media
class:
import {Media} from "capquadrat";
const media = new Media({
breakpoints: [
{name: "XS"},
{name: "S", minWidth: 600},
{name: "M", minWidth: 900},
{name: "L", minWidth: 1200},
{name: "XL", minWidth: 1500},
],
});
export default media;
Initializing the document
The second step is to include the necessary global CSS declarations in your document:
// Example using Emotion's GlobalStyles component; include something like this in your root component
<GlobalStyles styles={
[
{}, // Other application styles
media.globalStyles()
]/>
The globalStyles()
method will generate the following CSS variables:
--cq-min-width
: The minimum width in pixels of the active breakpoint--cq-max-width
: The maximum width in pixels of the active breakpoint--cq-min-margin
: The horizontal margin applied to the main content of the document, so that content does not reach the edges of the viewport. Note that the size of this margin can be configured via theminMargin
parameter for theMedia
constructor (or disabled, by setting it to0
).--cq-content-width
: The minimum width in pixels of the active breakpoint, accounting for the minimum margin described above
Writing responsive styles
Finally, you can now make use of your defined breakpoints to write your responsive styles for different breakpoints:
// Example using emotion's `css` property and object notation
<div
css={media
.any({
display: "grid",
gridTemplateColumns: "repeat(var(--columns), 1fr)",
gap: "1em",
})
.gt("L", {"--columns": 5})
.is("L", {"--columns": 4})
.lt("L", {"--columns": 3})}>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
As showcased in the above example, Media
offers a set of methods to generate media queries based on the previously defined endpoints:
any(breakpoint)
: Applies the given properties to all breakpoints.is(breakpoint)
: Apply the given properties only to the given breakpointis(Array<breakpoint>)
: As above, but with an array of multiple breakpoints; applies the given properties to all of the breakpoints included in the arraynot(breakpoint)
: Apply the given properties to all the breakpoints except for the given onegt(breakpoint)
: Apply the given properties only to breakpoints bigger than the given breakpointge(breakpoint)
: Apply the given properties only to the indicated breakpoint and any bigger breakpointslt(breakpoint)
: Apply the given properties only to breakpoints smaller than the given breakpointle(breakpoint)
: Apply the given properties only to the indicated breakpoint and any smaller breakpointsinRange(start, end)
: Apply the given properties to all the breakpoints contained within the given range (both ends included)
Utilities
The library also exposes a set of convenience methods:
horizontal(propertyName, value)
: Produces a CSS object with-left
and-right
declarations for the given CSS property. Useful to set margins, paddings and similar properties.vertical(propertyName, value)
: Produces a CSS object with-top
and-bottom
declarations for the given CSS property. Useful to set margins, paddings and similar properties.centerContent
: A CSS object with rules to center an element's content according to the content width reserved to the active breakpoint (see--cq-content-width
)
3 years ago