diff --git a/src/Stack.md b/src/Stack.md index 9ba45ec..ed1fe0e 100644 --- a/src/Stack.md +++ b/src/Stack.md @@ -105,21 +105,25 @@ You can also use it as a generic CSS Grid component: _Available props are `alignContent`, `alignItems`, `justifyContent`, `gridGap`, `gridRowGap`, `gridColumnGap`, `gridColumn`, `gridRow`, `gridAutoFlow`, `gridAutoRows`, `gridAutoColumns`, `gridTemplateRows` and `gridTemplateColumns`. See more in [styled-system docs](https://jxnblk.com/styled-system/table)._ -One more example: +Responsive buttons (full width on small screens, horizontally stacked on larger screens): ```jsx -const styled = require('styled-components').default; -const Button = styled.button({ - padding: '8px 16px', - border: 0, - borderRadius: '2px', - background: 'salmon', - color: 'white', - fontSize: '1rem' -}); +const Button = require('../styleguide/Button').default; ; ``` + +More responsive buttons (vertically stacked on small screens, 2×2 grid on larger screens): + +```jsx +const Button = require('../styleguide/Button').default; + + + + + +; +``` diff --git a/styleguide.config.js b/styleguide.config.js index f2abd87..3cdf287 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -1,6 +1,7 @@ const path = require('path'); module.exports = { + title: 'Stack Styled: stacking layouts for React', sections: [ { content: path.join(__dirname, 'styleguide/Intro.md'), diff --git a/styleguide/Button.js b/styleguide/Button.js new file mode 100644 index 0000000..34d0d4a --- /dev/null +++ b/styleguide/Button.js @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +const Button = styled.button` + padding: 8px 16px; + border: 0; + border-radius: 2px; + background: salmon; + color: white; + font-size: 1rem; + cursor: pointer; + + &:hover, + &:active, + &:focus { + background: tomato; + } +`; + +export default Button;