-
-
Notifications
You must be signed in to change notification settings - Fork 33
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add interactive examples to README #256
Comments
I will edit this comment if I finish more examples. Basics
Intermediate
|
I'll describe the intermediate examples in more detail below. Intermediate examplesConditional rendering (Only)Need to come up with a practical example of conditional rendering. Maybe a burger menu in header? Custom configurationThe intention is to illustrate how to configure your layout consistently using // 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. Using global layout settingsShow 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. https://codesandbox.io/s/conditional-rendering-4k90o |
@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. Conditional rendering
Custom configuration
|
@dandelionadia, thank you for the fixes! Please, if I may, there are a few more comments. Conditional rendering
Custom configuration
|
Just merged the intermediate examples section to 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.The text was updated successfully, but these errors were encountered: