Strelka Components
React.js components and storybook for Strelka projects
Requirements
Usage
$ yarn add emotion react-emotion emotion-theming recompose defaults.css @strelka/components
import 'defaults.css'
import { StrelkaThemeProvider, Container, Grid } from '@strelka/components'
const Page = () => (
<StrelkaThemeProvider>
<Container>
<Grid>
<Grid.Cell col={6}> Strelka </Grid.Cell>
</Grid>
</Container>
</StrelkaThemeProvider>
)
Styling Props
Styling props are a special type of props that are used to style components. For example:
import { StrelkaThemeProvider, Div } from '@strelka/components'
const Example = () => (
<StrelkaThemeProvider>
<Div tm='inverted' pd mgM={2} hideT wd={1/3}>
Example content
</Div>
</StrelkaThemeProvider>
)
Here pd
, mgM
, tm
, hideT
, wd
are styling props that define, correspondingly, paddings, margins, colors, display and width on different screen sizes.
M
, T
, D
are styling props' modifiers for quickly setting styles for specific media query
.
Media
Apply media query to styling props.
Description
Not actual prop, but modificator for prop styles (like pd
, wd
, hide
, etc.)
-
M
:(max-width: 768px)
-
T
:(min-width: 769px) and (max-width: 1024px)
-
D
:(min-width: 1025px)
Usage
Append to styled prop, then define value: pdM
, mgD
, hideM
.
<StrelkaThemeProvider>
<Div wdT={1/3} pdT hideM mgM={2} />
</StrelkaThemeProvider>
Spacing
Set margin
, padding
based on step value in sizes array.
Description
-
pd
— csspadding
-
mg
— cssmargin
Modificators
-
l
— left -
r
— right -
t
— top -
b
— bottom -
x
— left and right -
y
— top and bottom
Value
- type:
Number
,Object
- true value:
1
- possible values:
0-4
Numeric value according to position in sizes array
- desktop (D):
[ 0, 10, 20, 40, 80 ]
- mobile (M):
[ 0, 8, 16, 32, 32 ]
Links
- Possible values in storybook.
Usage
<StrelkaThemeProvider>
<Div
mgx={2} // or `mgl={2} mgr={2}`
pdlT={2} // or `pdl={{ T: 1 }}`
pd // same as `pd={1}`
/>
</StrelkaThemeProvider>
Result (styles):
{
marginLeft: 20,
marginRight: 20,
padding: 10,
'@media (min-width: 769px) and (max-width: 1024px):': {
paddingLeft: 20
},
'@media (max-width: 768px)': {
marginLeft: 16,
marginRight: 16,
padding: 8,
}
}
Sizes
Quickly set width, height in element
Description
-
wd
— csswidth
-
minWd
— cssmin-width
-
maxWd
— cssmax-width
-
ht
— cssheight
-
minHt
— cssmin-height
-
maxHt
— cssmax-height
Value
- type:
Number
,String
- true value:
100%
- false value:
0
- possible values:
0-1
,1-Infinity
, key intheme.sizes
If value smaller then 1
, it represents percentage,
i.e.: wd={1/3}
is width: 33.3333%
, wd={100}
is width: 100px
Links
- Possible values in storybook.
Usage
<StrelkaThemeProvider>
<Container>
<Div wd={1/3} wdM={1/2} />
<Div wd={1/3} wdM={1/2} />
<Div wd={1/3} wdM={1} />
<Div ht htM={1/2} />
</Container>
</StrelkaThemeProvider>
Result (styles):
{
width: '33.3333%',
height: '100%',
'@media (max-width: 768px)': {
width: '50%', // or width: '100%' in last div
height: '50%'
}
}
Display
Quickly update display style in element
Description
-
flex
- css 'display: flex' -
block
- css 'display: block' -
inline
- css 'display: inline' -
inlineBlock
- css 'display: inline-block' -
inlineFlex
- css 'display: inline-flex'
Value
- type:
Boolean
- possible values:
true
,false
Usage
<StrelkaThemeProvider>
<Container>
<Div inlineBlock flexM />
</Container>
</StrelkaThemeProvider>
Result (styles):
{
display: 'inline-block',
'@media (max-width: 768px)': {
display: 'flex'
}
}
Shortcuts
Set frequently used styles with shortcut props
Description
-
hide
— cssdisplay: none
-
debug
-{ outline: '1px solid {random-color} }
, outline
-
pst
-{ position: 'static' }
-
prl
-{ position: 'relative' }
-
pab
-{ position: 'absolute' }
-
pfx
-{ position: 'fixed' }
-
psy
-{ position: 'sticky' }
-
l
-left
-
r
-right
-
t
-top
-
b
-bottom
-
x
-left
,right
-
y
-top
,bottom
-
z
-z-index
-
display
—display
-
float
-float
-
clear
-clear
:both
||none
||value
-
cf
- apply Clearfix -
bd
-border
-
bdt
-border-top
-
bdb
-border-bottom
-
bdl
-border-left
-
bdr
-border-right
-
radius
-border-radius
-
tl
-{ text-align: left }
-
tc
-{ text-align: center }
-
tr
-{ text-align: right }
-
tj
-{ text-align: justify }
-
op
-opacity
-
hop
-&:hover { opacity: value }
-
nobr
-{ white-space: 'nowrap' }
-
ov
-ruleValue('overflow', 'auto')
-
ovx
-ruleValue('overflow-x', 'auto')
-
ovy
-ruleValue('overflow-y', 'auto')
-
ovh
-{ overflow: 'hidden' }
-
ovsx
-{ overflow-x: 'auto', overflow-y: 'hidden' }
-
ovsy
-{ overflow-x: 'hidden', overflow-y: 'auto' }
-
ovtouch
-{ -webkit-overflow-scrolling: 'touch' }
-
pointerEvents
-pointer-events
:auto
||none
cursor
-
transition
-transition
:all .3s
||value
transform
-
_hgpu
-{ transform: 'translateZ(0)' }
-
_hbackface
-{ opacity: 0.999 }
-
_hoverflow
-{ overflow: 'hidden' }
-
_hz
-{ z-index: 9999 }
Usage
<StrelkaThemeProvider>
<Container df>
<Div tc />
<Div dfo={-1} dib />
</Container>
</StrelkaThemeProvider>
Result (styles):
// Container
{
display: 'flex'
}
// First Div
{
textAlign: 'center'
}
// Next Div
{
order: -1,
display: 'inline-block'
}
Theming
Easily set background
, text
colors based on theme context,
Description
-
tm
— cssbackground-color: bg
,color: fg
, -
fg
- csscolor
-
bg
- cssbackground-color
-
bgi
- cssbackground-image
-
bdc
- cssborder-color
, -
shadow
- cssbox-shadow
(only state and color)
Value
- type:
Number
- default value:
true
- possible values: key name in current theme (like
education
,primary
,bg
)
Theme can be changed with <ThemePalette />
component (see usage).
Links
Usage
<StrelkaThemeProvider>
<Container>
<Div tm />
<Div tm='education' />
<Div bg='primary' />
{/* Change default theme */}
<ThemePalette name='education'>
<Div>
<Div tm />
<Div bg />
<Div bg='primary' />
</Div>
</ThemePalette>
</Container>
</StrelkaThemeProvider>
Result (styles):
// (in order from top to bottom)
// top level <Div>s
{
backgroundColor: colors.WHITE,
color: colors.BLACK
}
// tm='education'
{
backgroundColor: colors.YELLOW,
color: colors.BLACK
}
// bg='primary'
{
backgroundColor: colors.BLUE
}
// inside <ThemePalette name='education'>
// tm
{
backgroundColor: colors.YELLOW,
color: colors.BLACK
}
// bg
{
backgroundColor: colors.YELLOW
}
// bg='primary'
{
backgroundColor: colors.BLACK
}
Development
Quick Start
$ yarn
$ yarn run dev
$ open http://0.0.0.0:3003
Related
- eslint-config-strelka - Strelka's eslint config
Strelka