style.css
files and you add classes to your elements, Frontity uses CSS in JS instead. But don't worry, you don't have to learn a new language, it is CSS at the end.styled
from frontity
, and create styled-components.styled
followed by the HTML tag, and then a template string with the CSS, like this:styled
like a function. The styled
method works perfectly on all of your own or any third-party component, as long as they attach the passed className
prop to a DOM element.linkColor
but you can do anything you wantCSS
propcss
from frontity
.button
component has a color
prop that changes, well, its color.style
propstyle
prop, but you should not use it because the CSS you write there won't be optimized by Frontity!style
!<Global>
h1
, h2
or body
tags. In Frontity, this can be done with the Global
component.index.js
of your theme, so you can make sure it loads on all your pages.<Global>
component only if it is present in the DOM. You can use that ability to add conditional CSS, like this:<Global>
for anything other than HTML tags is not recommended because Frontity is not able to optimize it. That means you can use it for tags like html
, body
, a
, img
, and so on... But avoid it for classes. Use either the CSS prop or styled-components instead.<Global>
for classes!<Global>
component.<Global>
component with the external styles to your theme:<Global>
for anything other than HTML tags is not recommended because Frontity is not able to optimize it. That means you can use it to import external styles, but if you really want Frontity to be able to optimize it, you should extract that CSS and move it to styled-components instead.keyframes
. This one is used to define and use animations in your CSS.