Frontity Tutorial
  • 👋Welcome
  • ✔️Checking your progress
  • 1️⃣ Creating a custom theme
    • Create a Frontity Project
    • Create a Theme Package
    • Modify the <Root> component
    • Connect the <Root> component to the state
  • 2️⃣ Adding a menu
    • Use the <Link> component
  • 3️⃣ Displaying posts
    • Understanding the Frontity state
    • Display the list of posts
    • Display the post content
    • Display posts and pages separately
    • Formatting the date
  • 4️⃣ Adding styling
    • Global styles
    • Styled components
    • Styling the links
    • Styling the post info
    • Add dynamic styling
  • 5️⃣ Adding behaviour
    • Use 'state' and 'actions'
    • Add pagination
  • 6️⃣ Custom Post Types
    • Add support for Custom Post Types
  • 7️⃣ Finishing touches
    • Add a <Loading> component
    • Add a 404 page
    • Use the <html2react> component
    • SEO and head tags
    • Other things to do
  • 8️⃣ Deploying the project
    • Deploy to Vercel
  • 9️⃣ Next Steps
    • Learning resources
    • Getting help and support
    • Contributing to Frontity
Powered by GitBook
On this page

4️⃣ Adding styling

PreviousFormatting the dateNextGlobal styles

Last updated 4 years ago

Awesome, we now have a fully functioning website! But you're probably looking at it and thinking "I've seen prettier warthogs!" 🐗

Let's fix that in this section. This is where we'll take a look at styling our components.

Frontity uses , a CSS-in-JS library, for styling components. This has a number of advantages:

  • it only loads the CSS needed for each page which improves the performance

  • you don't have to worry about classes and problems with duplication, typos, etc

  • you don't have to worry about vendor prefixing so you can write your CSS based on the current standard and Frontity handles the rest for you

  • you can use all the power of JavaScript to style your components and create dynamic styles with ease

In this section we'll look at the <Global> component which enables you to apply styles site wide, and at the styled function which enables you to create styled components for use within the components that we've already created.

We'll then go on to look at how we can use styled components to apply styling to components we've already imported and used, such as the <Link> component, and finish off this section by looking at dynamic styling.

Dynamic styling is styling that is applied conditionally and is one of the great advantages of the CSS-in-JS approach.

Without further ado let's start making our site look good! 🎨

We'll get you started with some CSS-in-JS basics here, but you can learn more about styling your Frontity app .

Emotion
in our docs