React Blocks
React Blocks
Just the layout, no more, no less.
React blocks uses a declarative approach to build complex layouts on top of CSS Flexbox. Flexbox properties are exposed as attributes on a higher-level react component. Supports media-queries via predefined mobile-first queries. Further custom media queries can be specified in a styles object.
Please note, it does NOT handle mising browser features. Please use Modernizr with Polyfills to achieve that.
Test code
Horizontal and Vertical Layout
When a block component includes the layout attribute, it can become a flex container. You can specify horizontal or vertical to change the orientation
Layout direction can be mirrored with the reverse attribute.
By default, every block container has flexWrap property set to wrap.
Further the styles object would look as shown below.
Flexible children
Children of an element using the layout styles can use flex style to control their own sizing. For example.
The same is true for children of vertical elements.
Note: For vertical layouts, the container needs to have a height for the children to flex correctly.
Alignment: Cross-axis
By default, children stretch to fit the cross-axis (e.g. vertical stretching in a horizontal layout).
Children can be aligned across the cross-axis by adding align attribute and setting it to start, center or end.
Justification: Main-axis
Justification controls the content position in the main axis. Use the justify attribute and set it to start, center, end, between or around. By default justify is set to start.
Centered (Cross-axis & Main-axis)
Further more, an item in a flex-container can be aligned and justified using the centered attribute.
Self Alignment
Alignment can also be set per-child (instead of using the layout containers rules). By default, self alignment is set to stretch.
Nested Blocks (example of a complex layout)
Blocks can further be nested. Below shown is an example of a complex layout built using blocks. Check out the source code here.
Github page built using React and Blocks :)
MIT © whoisandie
浙公网安备 33010602011771号