Introduction to Nenyr Properties (20/27)

Introduction to Nenyr Properties (20/27)

Welcome to the comprehensive guide for Nenyr properties, the core building blocks of the Galadriel CSS framework. These properties enable you to define and manage your application’s styles with precision and flexibility. Currently, this list encompasses the most widely-used properties in Nenyr, providing a broad set of tools for effective style management.


Key Characteristics of Nenyr Properties

All Nenyr properties must receive values in the form of strings. Within these strings, you can define the exact values you would use for corresponding CSS properties. This means that Nenyr integrates seamlessly with the CSS specifications you are already familiar with, allowing for a smooth transition to this framework while providing additional organization and clarity in your styles. For example, if a CSS property such as color would accept a value like "red", the corresponding Nenyr property must be defined with a string, such as:

Declare Class("className") {
    Stylesheet({
        color: "red",
        backgroundColor: "blue",
        border: "1px solid green",
        borderRadius: "24px",
    })
}        

The use of strings ensures consistency and helps maintain a clean syntax throughout your Nenyr documents. This approach allows developers to intuitively adapt their existing CSS knowledge while benefiting from the advanced features of the Galadriel CSS framework.


Future of Nenyr Properties

As Nenyr evolves, this set of properties will continue to expand, introducing even more advanced functionality and features to meet the diverse needs of modern web development. Whether you're working with fonts, colors, layouts, or animations, the Nenyr properties provide a powerful foundation for your styles.


Feedback and Requests

If you encounter any missing properties or have specific requests, please feel free to reach out. Your feedback is valuable, and I am happy to add new properties based on user needs. You can email your requests to: [email protected].


Current List of Available Nenyr Properties

Here is the current list of available Nenyr properties along with their corresponding CSS properties:

  • flexGrow: flex-grow
  • hyphens: hyphens
  • aspectRatio: aspect-ratio
  • accentColor: accent-color
  • backdropFilter: backdrop-filter
  • content: content
  • gap: gap
  • rowGap: row-gap
  • scale: scale
  • order: order
  • pointerEvents: pointer-events
  • margin: margin
  • marginBottom: margin-bottom
  • marginLeft: margin-left
  • marginRight: margin-right
  • marginTop: margin-top
  • padding: padding
  • paddingBottom: padding-bottom
  • paddingLeft: padding-left
  • paddingRight: padding-right
  • paddingTop: padding-top
  • height: height
  • width: width
  • filter: filter
  • maxHeight: max-height
  • maxWidth: max-width
  • minHeight: min-height
  • minWidth: min-width
  • border: border
  • borderBottom: border-bottom
  • borderBottomColor: border-bottom-color
  • borderBottomStyle: border-bottom-style
  • borderBottomWidth: border-bottom-width
  • borderColor: border-color
  • borderLeft: border-left
  • borderLeftColor: border-left-color
  • borderLeftStyle: border-left-style
  • borderLeftWidth: border-left-width
  • borderRight: border-right
  • borderRightColor: border-right-color
  • borderRightStyles: border-right-styles
  • borderRightWidth: border-right-width
  • borderStyle: border-style
  • borderTop: border-top
  • borderTopColor: border-top-color
  • borderTopStyle: border-top-style
  • borderTopWidth: border-top-width
  • borderWidth: border-width
  • outline: outline
  • outlineColor: outline-color
  • outlineStyle: outline-style
  • outlineWidth: outline-width
  • borderBottomLeftRadius: border-bottom-left-radius
  • borderBottomRightRadius: border-bottom-right-radius
  • borderImage: border-image
  • borderImageOutset: border-image-outset
  • borderImageRepeat: border-image-repeat
  • borderImageSlice: border-image-slice
  • borderImageSource: border-image-source
  • borderImageWidth: border-image-width
  • borderRadius: border-radius
  • borderTopLeftRadius: border-top-left-radius
  • borderTopRightRadius: border-top-right-radius
  • boxDecorationBreak: box-decoration-break
  • boxShadow: box-shadow
  • background: background
  • backgroundAttachment: background-attachment
  • backgroundColor: background-color
  • backgroundImage: background-image
  • backgroundPosition: background-position
  • backgroundPositionX: background-position-x
  • backgroundPositionY: background-position-y
  • backgroundRepeat: background-repeat
  • backgroundClip: background-clip
  • backgroundOrigin: background-origin
  • backgroundSize: background-size
  • backgroundBlendMode: background-blend-mode
  • colorProfile: color-profile
  • opacity: opacity
  • renderingIntent: rendering-intent
  • font: font
  • fontFamily: font-family
  • fontSize: font-size
  • fontStyle: font-style
  • fontVariant: font-variant
  • fontWeight: font-weight
  • fontSizeAdjust: font-size-adjust
  • fontStretch: font-stretch
  • positioning: positioning
  • bottom: bottom
  • clear: clear
  • clipPath: clip-path
  • cursor: cursor
  • display: display
  • float: float
  • left: left
  • overflow: overflow
  • position: position
  • right: right
  • top: top
  • visibility: visibility
  • zIndex: z-index
  • color: color
  • direction: direction
  • flexDirection: flex-direction
  • flexWrap: flex-wrap
  • letterSpacing: letter-spacing
  • lineHeight: line-height
  • lineBreak: line-break
  • textAlign: text-align
  • textDecoration: text-decoration
  • textIndent: text-indent
  • textTransform: text-transform
  • unicodeBidi: unicode-bidi
  • verticalAlign: vertical-align
  • whiteSpace: white-space
  • wordSpacing: word-spacing
  • textOutline: text-outline
  • textOverflow: text-overflow
  • textShadow: text-shadow
  • textWrap: text-wrap
  • wordBreak: word-break
  • wordWrap: word-wrap
  • listStyle: list-style
  • listStyleImage: list-style-image
  • listStylePosition: list-style-position
  • listStyleType: list-style-type
  • borderCollapse: border-collapse
  • borderSpacing: border-spacing
  • captionSide: caption-side
  • emptyCells: empty-cells
  • tableLayout: table-layout
  • marqueeDirection: marquee-direction
  • marqueePlayCount: marquee-play-count
  • marqueeSpeed: marquee-speed
  • marqueeStyle: marquee-style
  • overflowX: overflow-x
  • overflowY: overflow-y
  • overflowStyle: overflow-style
  • rotation: rotation
  • boxAlign: box-align
  • boxDirection: box-direction
  • boxFlex: box-flex
  • boxFlexGroup: box-flex-group
  • boxLines: box-lines
  • boxOrdinalGroup: box-ordinal-group
  • boxOrient: box-orient
  • boxPack: box-pack
  • alignmentAdjust: alignment-adjust
  • alignmentBaseline: alignment-baseline
  • baselineShift: baseline-shift
  • dominantBaseline: dominant-baseline
  • dropInitialAfterAdjust: drop-initial-after-adjust
  • dropInitialAfterAlign: drop-initial-after-align
  • dropInitialBeforeAdjust: drop-initial-before-adjust
  • dropInitialBeforeAlign: drop-initial-before-align
  • dropInitialSize: drop-initial-size
  • dropInitialValue: drop-initial-value
  • inlineBoxAlign: inline-box-align
  • lineStacking: line-stacking
  • lineStackingRuby: line-stacking-ruby
  • lineStackingShift: line-stacking-shift
  • lineStackingStrategy: line-stacking-strategy
  • textHeight: text-height
  • columnCount: column-count
  • columnFill: column-fill
  • columnGap: column-gap
  • columnRule: column-rule
  • columnRuleColor: column-rule-color
  • columnRuleStyle: column-rule-style
  • columnRuleWidth: column-rule-width
  • columnSpan: column-span
  • columnWidth: column-width
  • columns: columns
  • animation: animation
  • animationName: animation-name
  • animationDuration: animation-duration
  • animationTimingFunction: animation-timing-function
  • animationDelay: animation-delay
  • animationFillMode: animation-fill-mode
  • animationIterationCount: animation-iteration-count
  • animationDirection: animation-direction
  • animationPlayState: animation-play-state
  • transform: transform
  • transformOrigin: transform-origin
  • transformStyle: transform-style
  • perspective: perspective
  • perspectiveOrigin: perspective-origin
  • backfaceVisibility: backface-visibility
  • transition: transition
  • transitionProperty: transition-property
  • transitionDuration: transition-duration
  • transitionTimingFunction: transition-timing-function
  • transitionDelay: transition-delay
  • orphans: orphans
  • pageBreakAfter: page-break-after
  • pageBreakBefore: page-break-before
  • pageBreakInside: page-break-inside
  • widows: widows
  • mark: mark
  • markAfter: mark-after
  • markBefore: mark-before
  • phonemes: phonemes
  • rest: rest
  • restAfter: rest-after
  • restBefore: rest-before
  • voiceBalance: voice-balance
  • voiceDuration: voice-duration
  • voicePitch: voice-pitch
  • voicePitchRange: voice-pitch-range
  • voiceRate: voice-rate
  • voiceStress: voice-stress
  • voiceVolume: voice-volume
  • appearance: appearance
  • boxSizing: box-sizing
  • icon: icon
  • navDown: nav-down
  • navIndex: nav-index
  • navLeft: nav-left
  • navRight: nav-right
  • navUp: nav-up
  • outlineOffset: outline-offset
  • resize: resize
  • quotes: quotes
  • rotate: rotate
  • translate: translate
  • userSelect: user-select
  • writingMode: writing-mode
  • objectPosition: object-position
  • objectFit: object-fit
  • justifySelf: justify-self
  • justifyContent: justify-content
  • justifyItems: justify-items
  • alignSelf: align-self
  • alignContent: align-content
  • alignItems: align-items
  • grid: grid
  • gridArea: grid-area
  • gridAutoColumns: grid-auto-columns
  • gridAutoFlow: grid-auto-flow
  • gridAutoRows: grid-auto-rows
  • gridColumn: grid-column
  • gridColumnEnd: grid-column-end
  • gridColumnStart: grid-column-start
  • gridRow: grid-row
  • gridRowEnd: grid-row-end
  • gridRowStart: grid-row-start
  • gridTemplate: grid-template
  • gridTemplateAreas: grid-template-areas
  • gridTemplateColumns: grid-template-columns
  • gridTemplateRows: grid-template-rows
  • scrollbarColor: scrollbar-color
  • scrollbarWidth: scrollbar-width
  • scrollbarGutter: scrollbar-gutter

要查看或添加评论,请登录

Patrick Gunnar的更多文章

社区洞察

其他会员也浏览了