Open kettanaito opened 4 years ago
I will edit this comment if I finish more examples.
I'll describe the intermediate examples in more detail below.
Need to come up with a practical example of conditional rendering. Maybe a burger menu in header?
The intention is to illustrate how to configure your layout consistently using Layout.configure
.
// src/index.jsx
import Layout from 'atomic-layout'
Layout.configure({
defaultUnit: 'rem',
breakpoints: {
mobile: {
maxWidth: '570px'
},
tablet: {
minWidth: '571px',
maxWidth: '960px'
},
desktop: {
minWidth: '961px'
}
}
})
After the configuration is applied, demonstrate how it works by writing a simple Box/Composition and using those custom breakpoints for responsive props (i.e. <Composition areasDesktop={...} />
).
Show an example of a styled component that declares an explicit media query referencing to values from Atomic Layout.
I did two examples to the Intermediate part. Could you look at it please and tell me what you do not like and what do you want to change?
https://codesandbox.io/s/conditional-rendering-4k90o https://codesandbox.io/s/custom-configuration-d01ku
@dandelionadia, thank you for providing those! Look amazing. If you don't mind, I'll list a few comments to the examples you've prepared.
index.js
you are using padding="20px"
, while px
is your default measurement unit. Could you please replace it with padding={20}
(which produces "20px" in your case).key
prop:Warning: Each child in a list should have a unique "key" prop.
border-radius
on the Album
, what do you think? You can look up the border radius from [your previous examples](Warning: Each child in a list should have a unique "key" prop.). It'd be great to align border radiuses between examples.@dandelionadia, thank you for the fixes! Please, if I may, there are a few more comments.
Logo.js
(svg element).data
array into a separate JSON file (i.e. data.json
).maxWidth={16}
and maxWidthTablet={30}
on Album.js
component? So it doesn't stretch full-width on small screens.Just merged the intermediate examples section to master
!
Huge thanks once more, @dandelionadia! Looking forward to those advanced ones :)
What:
The README should include the list of examples. Each example item should contain:
Why:
Carefully designed, a list of examples may substitute documentation at its entirety. At least it's a great illustrative showcase for practical learners and beyond.
How:
I suggest to split examples into sections based on the complexity level.
Basics
Intermediate
<Only/>
component.Layout.configure()
to set custom breakpoints and custom measurement unit.query()
utility function to compose inline media queries instyled-components
Advanced
useResponsiveQuery
)<Visible/>
to conditionally render components and support client-side hydration.