Composition
Before we dive into the specifics of CSS, its worth learning the parts of Phlex that make it easier to compose styles.
Tokens
Phlex accepts arrays into attributes and joins them with spaces. That means you can do things like this:
class HeroSection < Base::Component
def initialize(size: :medium, url: nil)
@size = "hero-section__#{size}"
@url = url
end
def view_template(&)
div(class: ["hero-section", @size], &)
end
end
And Phlex will render <div class="hero-section hero-section__medium">.
The style attribute
On some occasions you may need to apply inline styles to an element. Phlex provides a style attribute that accepts a hash of CSS properties and values.
🔓 Unlock content
Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.
Pre-order video course for $379 $249
class HeroSection < ▓▓▓▓::▓▓▓▓▓▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓(size: :medium, url: nil)
▓▓▓▓▓ = "hero-section__#{▓▓▓▓}"
▓▓▓▓ = ▓▓▓
end
def ▓▓▓▓▓▓▓▓▓▓▓▓▓(&)
▓▓▓(
class: ["hero-section", ▓▓▓▓▓],
style: { background_url: ▓▓▓▓ },
&
)
end
end
▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓
▓▓▓▓ class="hero-section hero-section__medium" style="background-image: url('https://example.com/image.jpg');"▓▓▓▓▓▓▓
The class keyword
▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓ ▓ ▓▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓
class HeroSection < ▓▓▓▓::▓▓▓▓▓▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓(size: :medium, url: nil, class: nil)
▓▓▓▓▓ = "hero-section__#{▓▓▓▓}"
▓▓▓▓ = ▓▓▓
▓▓▓▓▓▓ = ▓▓▓▓(class:)
end
def ▓▓▓▓▓▓▓▓▓▓▓▓▓(&)
▓▓▓(
class: [
"hero-section",
▓▓▓▓▓,
▓▓▓▓▓▓
],
style: { background_url: ▓▓▓▓ },
&
)
end
end
Helper methods
▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓ ▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓
class HeroSection < ▓▓▓▓::▓▓▓▓▓▓▓▓▓
def ▓▓▓▓▓▓▓▓▓▓(size: :medium, url: nil, class: nil)
▓▓▓▓▓ = "hero-section__#{▓▓▓▓}"
▓▓▓▓ = ▓▓▓
▓▓▓▓▓▓ = ▓▓▓▓(class:)
end
def ▓▓▓▓▓▓▓▓▓▓▓▓▓(&)
▓▓▓(
class: ▓▓▓▓▓▓▓▓▓(▓▓▓▓▓, ▓▓▓▓▓▓),
style: { background_url: ▓▓▓▓ },
&
)
end
protected
def ▓▓▓▓▓▓▓▓▓(*)
▓▓▓▓▓▓(*).▓▓▓▓▓▓▓(self.▓▓▓▓▓.▓▓▓▓▓▓▓▓▓)
end
def ▓▓▓▓▓▓(*▓▓▓▓▓▓)
▓▓▓▓▓▓.▓▓▓ { ▓▓▓▓▓▓▓▓ ▓▓ }
end
def ▓▓▓▓▓▓▓▓(▓▓▓▓▓)
"#{self.▓▓▓▓▓.▓▓▓▓▓▓▓▓▓}__#{▓▓▓▓▓}"
end
def self.▓▓▓▓▓▓▓▓▓
class.▓▓▓▓.▓▓▓▓▓▓▓▓▓
end
end
▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓ ▓ ▓▓▓ ▓▓▓▓ ▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓