Create component variations in React with styled-components and "extend"
In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.
Animate your user interface in React with styled-components and "keyframes"
In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.
Theme your application with styled-components and "ThemeProvider"
In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .
Style the body element with styled-components and "injectGlobal"
In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.
Style a React component with styled-components
Generate multiple HTML components from an array with the "for loop" in TwigJS
In this lesson, we transform a series of TwigJS "includes" into a clean "for loop". We store our content into an array and let the loop generate one HTML component for each entry.
Make your HTML components dynamic with the "with" keyword in TwigJS
In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.
Create reusable HTML components with the "include" tag in TwigJS
In this lesson, we take a repeating block of HTML and turn it into a dynamic, reusable TwigJS component. The "include" tag allows us to generate multiple instances of the component, each with their own custom content.