Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

styled-velocity

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-velocity

Styled-Velocity, a React-based styled prop and UI library to increase your velocity and help build your Design System.

  • 0.0.43
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
24
decreased by-54.72%
Maintainers
1
Weekly downloads
 
Created
Source

Styled-Velocity

Styled-Velocity, a React-based styled prop and UI library to increase your velocity and help build your Design System.

Install

yarn add styled-velocity

or

npm install styled-velocity

sharedProps

Import example:

import { appearanceProps, cssProps, dimensionProps } from 'styled-velocity'
  • Overview - docs

Components

All of the following have access to the sharedProps.

Import example:

import { Element } 'styled-velocity'

createStyle

Available sharedProps

importpropcss propertyconversionType
appearancePropsbgbackground
""bgImagebackground-image
""bgSizebackground-size
""borderRadiusborder-radius
""boxShadowbox-shadow
cssPropscssany css
dimensionPropsmmarginpercentageOrPixel
""mtmargin-top""
""mbmargin-bottom""
""mlmargin-left""
""mrmargin-right""
""mxml and mr""
""mymt and mb""
""ppadding""
""ptpadding-top""
""pbpadding-bottom""
""plpadding-left""
""prpadding-right""
""pxpl and pr""
""pypt and pb""
""hheight""
""wwidth, flex-basis""
""minhmin-height""
""minwmin-width""
""maxhmax-height""
""maxwmax-width""
""ccw and chgetCells
""cwcells wide""
""chcells height (cells tall)""
""cmcells margin""
""cmlcells margin-left""
""cmrcells margin-right""
""cmtcells margin-top""
""cmbcells margin-bottom""
""cmxcml and cmr""
""cmycmt and cmb""
""cpcells padding""
""cplcells padding-left""
""cprcells padding-right""
""cptcells padding-top""
""cpbcells padding-bottom""
""cpxcpl and cpr""
""cpycpt and cpb""
""ctransformcells transformgetCellTranslate
displayModedisplayModeoutputs bounding box color
flexPropsdirectionflex-directiongetFlexProperty
""wrapflex-wrap""
""alignjustify-content""
""valignalign-items""
""valignContentalign-content""
gridLinesgridLinesoutputs grid lines
growShrinkPropsgrowflex-growbooleanToIntString
""shrinkflex-shrink""
positionPropsttoppercentageOrPixel
""bbottom""
""lleft""
""rright""
""xr and l""
""yt and b""
""ctcells topgetCells
""cbcells bottom""
""clcells left""
""crcells right""
""cxcr and cl""
""cyct and cb""
""positionposition
""zz-index
textPropscolorcolor
""textAligntext-align
""textTransformtext-transform
""fontFamilyfont-family
""fontSizefont-sizepercentageOrPixel
""fontWeightfont-weight
""lineHeightline-height

Breakpoints

About

All of the sharedProps can take a single value, or an object of Breakpoints. You have all the choices you could possibly use for creating style within breakpoints. This system is mobile first, but there's several ways to mix it up.

Example

Let's using the width css property for the following examples...

No breakpoint
w={50}
Mobile: 50, Tablet: 100, Desktop: 150

If you want to create a breakpoint, supply an object, and use the key as the breakpoint. Make sure to give the lowest a 0, if it's min-width 0, it won't wrap it in a media query.

w={{ 0: 50, 768: 100, 1024: 150 }}

returns

width: 50px;

@media (min-width: 768px) {
  width: 100px;
}
@media (min-width: 1024px) {
  width: 150px;
}
Mobile: 50, Tablet: 100, Desktop

If you want to create a breakpoint that has min and max, supply a key that is a string like so...

w={{ '768-1024': 100 }}

returns

@media (min-width: 768px) and (max-width: 1024px) {
  width: 100px;
}

Pretty cool, eh?

Scaling Font Sizes

This min-max string key is how the scaling pixel values work. If you wanted to scale anything from one pixel value to another, like font-size for instance, you can do this...

fontSize={{
  0: 12,
  '414-1023': { min: 12, max: 36 },
  1024: 36
}}

returns

font-size: 12px;

@media (min-width: 414px) and (max-width: 1023px) {
  A css formula to scale the font-size from 12px to 36px based on screen width
}

@media (min-width: 1024px) {
  font-size: 36px;
}

conversionType

Notice the conversionType? This should clue you into what is possible for the given prop.

percentageOrPixel

You can pass is an int like 50 and it'll convert to 50px. You can pass it a fraction, like 1 / 2 and it'll convert to a 50%. You can also just pass a string like 50em.

booleanToIntString

Used for grow and shrink, if you pass true, it'll convert to 1 for css purposes. And false to 0.

getCells

This takes an int and converts it to the cells width (or height). Thus cw={2} makes the element 2 cells wide (based on your grid config).

getCellTranslate

Similar to getCells, but takes an object. ctransform={{x: 0.5, y: 0}} would offset the x coords of the element by 1/2 cells width.

getFlexProperty

Flex has some pretty unintuitive properties. For instance, valign="top" refers to the vertical alignment an element (assuming you staying with direction=row). You can of course pass the original css flex properties as well if you are used to them.

inputoutput
topflex-start
leftflex-start
startflex-start
bottomflex-end
rightflex-end
endflex-end
middlecenter
centercenter

Keywords

FAQs

Package last updated on 16 Aug 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc