Overview

API Reference

This section provides detailed reference documentation for working with Master CSS.

Design Token

Configuration

Syntax

Accent Color
Setting the accent color of user interface elements or controls.
Align Content
Controlling how multiple rows or columns are aligned along its cross axis.
Align Items
Controlling how items are aligned along its cross axis.
Align Self
Controlling how an individual item is aligned along its cross axis.
Animation
Applying an animation between styles.
Animation Delay
Setting a time to delay before beginning to perform the animation.
Animation Direction
Setting the direction of the animation.
Animation Duration
Setting the length of time that an animation takes to complete one cycle.
Animation Fill Mode
Setting how a CSS animation applies styles to its target before and after its execution.
Animation Iteration Count
Setting the number of times an animation should be played.
Animation Name
Setting the names of the animation.
Animation Play State
Setting whether an animation is running or paused.
Animation Timing Function
Setting speed curve of the animation.
Appearance
Controlling the native appearance of UI controls.
Aspect Ratio
Setting the ratio for the box.
Backdrop Filter
Style syntax for applying filter effects to the area behind an target element.
Background
Setting all background style properties at once.
Background Attachment
Setting whether position of background image is fixed when scrolling.
Background Blend Mode
Setting how an element's background images should blend with the background color.
Background Clip
Controlling how clip the background.
Background Color
Setting the background color of an element.
Background Image
Setting background images on an element.
Background Origin
Setting the background's origin.
Background Position
Setting the initial position for background image.
Background Repeat
Setting how background images are repeated.
Background Size
Setting the size of the background image.
Border
Setting an element’s border.
Border Collapse
Setting whether table cell have shared or separate borders.
Border Color
Setting the color of an element’s border.
Border Radius
Setting radius of an element’s corners.
Border Style
Setting the line style for an element’s border.
Border Width
Setting the width of an element’s border.
Box Decoration Break
Setting how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
Box Shadow
Adding shadow effects around an element.
Box Sizing
Setting how the total width and height of an element is calculated.
Break After
Controlling how page, column, or region breaks should occur after an element.
Break Before
Controlling how page, column, or region breaks should occur before the specified element.
Break Inside
Controlling how page, column, or region breaks should occur within the specified element.
Caret Color
Setting the color of the cursor in text input.
Clear
Moving an element below floating elements instead of floating to the left or right.
Clip Path
Creating a clipping region.
Color
Setting foreground color of an element.
Column Span
Setting how elements span across multiple columns.
Columns
Setting the number of columns within the container.
Contain
Providing performance benefits by limiting calculations of layout.
Content
Replacing an element with a generated value.
Cursor
Setting the mouse cursor style.
Direction
Setting the direction of text.
Display
Controlling the element's inner and outer display types.
Fill
Setting the color of an SVG shape.
Filter
Applying graphic effects to an element.
Flex
Setting how flex items grow or shrink.
Flex Basis
Setting the initial main size of a flex item.
Flex Direction
Setting the direction of flex items.
Flex Grow
Setting how flex items grow.
Flex Shrink
Setting how flex items shrink.
Flex Wrap
Setting how flex items wrap.
Float
Placing an element on the left or right side of its container.
Font
Setting font properties of an element.
Font Family
Setting the font for an element.
Font Feature Settings
Controlling advanced typographic features in OpenType fonts.
Font Size
Setting the font size of elements.
Font Smoothing
Controlling the font smoothing of an element.
Font Style
Setting font style of an element.
Font Variant Numeric
Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Font Weight
Setting the weight of the font.
Gap
Setting the gutters between rows and columns.
Grid
Setting layout of grid system.
Grid Area
Setting a size and location within a grid.
Grid Auto Columns
Setting the size of the grid columns.
Grid Auto Flow
Controlling how auto-placed items get inserted in the grid.
Grid Auto Rows
Setting the size of the grid rows.
Grid Column
Setting a grid items's size and location in a grid layout.
Grid Columns
Style utility for creating multiple grid columns.
Grid Row
Setting a grid items's size and location in a grid layout.
Grid Rows
Style utility for creating multiple grid rows.
Grid Template
Setting grid columns, grid rows, and grid areas.
Grid Template Areas
Setting areas in the grid container
Grid Template Columns
Creating columns in a grid layout.
Grid Template Rows
Creating rows in a grid layout.
Height
Setting an element’s height.
Inset
Setting distance between an element and the parent element.
Isolation
Controlling whether an element should create a new stacking context.
Justify Content
Controlling how items are aligned along its main axis.
Justify Items
Controlling how items are aligned along its inline axis.
Justify Self
Controlling how an individual item is aligned along its inline axis.
Letter Spacing
Setting the spacing between text characters.
Line Clamp
Limiting the contents of a container to the specified number of lines.
Line Height
Setting the height of a line box.
List Style
Setting all the list style properties at once.
List Style Image
Replacing the list item marker with an image.
List Style Position
Setting the position of the list item marker.
List Style Type
Setting the style of the list item marker.
Margin
Setting the margin area on all four sides of an element.
Mask Image
Setting the image that is used as mask layer for an element.
Max Height
Setting the maximum height of an element.
Max Size
Style shorthand for setting the max-width and max-height of an element.
Max Width
Setting the maximum width of an element.
Min Height
Setting the minimum height of an element.
Min Size
Style shorthand for setting the min-width and min-height of an element.
Min Width
Setting the minimum width of an element.
Mix Blend Mode
Setting how an element's content should blend with its parent background.
Object Fit
Setting how the content should be resized to fit its container.
Object Position
Setting the alignment of the selected replaced element within the element's box.
Opacity
Setting the opacity of an element.
Order
Changing the order of item in flex or grid container.
Outline
Setting all the outline properties at once.
Outline Color
Setting the color of an element’s outline.
Outline Offset
Setting the spacing between an outline and the border of an element.
Outline Style
Setting the style of an element's outline.
Outline Width
Setting the thickness of an element's outline.
Overflow
Controlling the desired behavior for an element's overflow.
Overscroll Behavior
Setting what a browser does when reaching the boundary of a scrolling area.
Padding
Setting the padding area on all four sides of an element.
Place Content
Setting align-content and justify-content at the same time.
Place Items
Setting align-items and justify-items at the same time.
Place Self
Setting align-self and justify-self at the same time.
Pointer Events
Setting whether an element reacts to pointer events.
Position
Setting an element is positioned in a document.
Resize
Setting whether an element is resizable.
Screen Readers
Style utility for imporving the accessibility with screen readers.
Scroll Behavior
Setting the scrolling behavior for a scrolling box.
Scroll Margin
Setting the scroll margin of an element.
Scroll Padding
Setting the scroll padding of an element.
Scroll Snap Align
Setting the scroll snap position.
Scroll Snap Stop
Setting whether scroll container is pass over snap positions.
Scroll Snap Type
Setting how strictly snap points are enforced on the scroll container.
Shape Image Threshold
Setting the alpha channel threshold for a CSS shape.
Shape Margin
Setting a margin for a CSS shape.
Shape Outside
Setting a shape around which adjacent inline content should wrap.
Size
Style shorthand for setting the width and height of an element.
Stroke
Setting the outline color of an SVG shape.
Stroke Width
Setting the width of the stroke to be applied to the SVG shape.
Text Align
Setting the text alignment of an element.
Text Decoration
Setting the appearance of decorative lines on text.
Text Decoration Color
Setting the color of decorative lines on text.
Text Decoration Line
Setting the kind of decoration that is used on text.
Text Decoration Style
Setting the style of the decoration line that is used on text.
Text Decoration Thickness
Setting thickness of the decoration line.
Text Fill Color
Setting the color of text.
Text Indent
Setting indentation of the first line.
Text Orientation
Setting orientation of the text characters in a line.
Text Overflow
Handling how hidden overflow content.
Text Rendering
Setting what to optimize when rendering text.
Text Shadow
Adding shadows to text.
Text Size
Style utility for setting the font size with a golden-ratio line height.
Text Stroke
Setting the width and color of strokes for text characters.
Text Stroke Color
Setting the color of the stroke for text characters.
Text Stroke Width
Setting the width of the stroke for text characters.
Text Transform
Controlling capitalization of text.
Text Underline Offset
Setting the distance of a text decoration line from its original position.
Text Wrap
Controlling how text inside an element is wrapped.
Touch Action
Setting how an element's region can be manipulated by a touchscreen user.
Transform
Controlling rotate, scale, skew, or translate an element.
Transform Box
Defining the layout box to which transform and transform-origin properties relate.
Transform Origin
Setting the origin for an element’s transformations.
Transform Style
Setting how children of an element are rendered in the 3D space.
Transition
Controlling animation speed when changing CSS properties.
Transition Delay
Setting a time to delay before starting transition.
Transition Duration
Setting the length of time a transition should takes to complete.
Transition Property
Setting the CSS properties to which a transition effect should be applied.
Transition Timing Function
Setting speed curve of the transition effect.
User Drag
Controlling whether the user can drag element.
User Select
Controlling whether the user can select text.
Variable
CSS variables defined specific values to be reused throughout a document.
Vertical Align
Setting vertical alignment.
Visibility
Controlling whether an element is visible.
White Space
Controlling how whitespace and line breaks within an element are handled.
Width
Setting an element’s width.
Will Change
Setting how an element is expected to change in the browser.
Word Break
Setting whether words should break.
Word Spacing
Setting the spacing between words.
Writing Mode
Setting different writing mode.
Z Index
Set the z-order of a positioned element.

Package

Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.