Color is an integral part of web design, and choosing the right color scheme can greatly impact the look and feel of a website. It is a powerful tool in web design, and it can greatly influence the way users perceive and interact with a website.
The fastn
color-scheme framework provides a simple and powerful way to define
color schemes and apply them to a website. In this showcase, we will present
different sections using different color schemes to highlight how minimal
changes are required to switch from one color scheme to another. Hence achieve
the impact the colors have on the website's design and the emotion they evoke.
How many lines of code change were required to make this possible?
The answer is only one.
To understand this, let's examine the code of interest for the above cards. To initialize the card, all we need to do is invoke thecolor-display
component:color-display
component-- color-display:
Then how can we achieve different color scheme?
To achieve different color schemes, First, we import the corresponding color scheme package. Then we wrap the call to thecolor-display
component in another
container that contains the colors from the imported color scheme package. This
color, then, is inherited by color-display
.-- import: fastn-community.github.io/forest-cs
-- ftd.column:
colors: $forest-cs.main
-- color-display:
-- end: ftd.column
color-display
component.As shown in the code snippet above, we are passing a reference of the forest-cs .main
variable from the forest-cs
module to the colors
property of ftd .column
.
The type of forest-cs.main
variable is ftd.color-scheme
.
ftd.color-scheme
.ftd
module-- record color-scheme:
ftd.background-colors background:
ftd.color border:
ftd.color border-strong:
ftd.color text:
ftd.color text-strong:
ftd.color shadow:
ftd.color scrim:
ftd.cta-colors cta-primary:
ftd.cta-colors cta-secondary:
ftd.cta-colors cta-tertiary:
ftd.cta-colors cta-danger:
ftd.pst accent:
ftd.btb error:
ftd.btb success:
ftd.btb info:
ftd.btb warning:
ftd.custom-colors custom:
-- record background-colors:
ftd.color base:
ftd.color step-1:
ftd.color step-2:
ftd.color overlay:
ftd.color code:
-- record cta-colors:
ftd.color base:
ftd.color hover:
ftd.color pressed:
ftd.color disabled:
ftd.color focused:
ftd.color border:
ftd.color text:
-- record pst:
ftd.color primary:
ftd.color secondary:
ftd.color tertiary:
-- record btb:
ftd.color base:
ftd.color text:
ftd.color border:
-- record custom-colors:
ftd.color one:
ftd.color two:
ftd.color three:
ftd.color four:
ftd.color five:
ftd.color six:
ftd.color seven:
ftd.color eight:
ftd.color nine:
ftd.color ten:
As seen above, ftd.color-scheme
is a record of various color fields that are
used to specify the colors to be applied to various elements on the web page.
fastn
to utilize this color record and establish the
color scheme of your website.How does the color-display
component inherits the colors from it's parent?
This is achieved through the use of the special keyword inherited
. The
inherited
keyword gives access to the variables of its ancestors, allowing the
component to search for the referred variable starting from its immediate
parent, and then moving up to its grandparent and so on.
As depicted in the code above, the container ftd.column
contains a property
named color
where we have passed the reference to ftd.color-scheme
type
variable. It is then inherited by color-display
component.
inherited
references, let us construct a basic
component "my-color":my-color
component-- component my-color:
-- ftd.text: Text
padding.px: 20
border-width.px: 10
color: $inherited.colors.text-strong
background.solid: $inherited.colors.background.step-2
border-color: $inherited.colors.border-strong
-- end: my-color
sunset-cs
color scheme to it:my-color
component-- import: fastn-community.github.io/saturated-sunset-cs as sunset-cs
-- ftd.column:
colors: $sunset-cs.main
-- my-color:
-- end: ftd.column
forest-cs
:my-color
component-- import: fastn-community.github.io/forest-cs
-- ftd.column:
colors: $forest-cs.main
-- my-color:
-- end: ftd.column
fastn
Color Scheme:Easy to use: The fastn
color scheme framework is designed to be simple
and straightforward, making it easy for designers to define and apply color
schemes to a website.
Dynamic and flexible: With the ability to easily change colors and the use of inheritance, the ftd color scheme framework allows designers to create dynamic and flexible color schemes that can be easily modified as needed.
Consistent appearance: By using the fastn
color scheme framework,
designers can ensure a consistent appearance throughout their website,
making it easier for users to navigate and interact with the site.
Centralized Management: By centralizing the definition of color schemes, this makes it easy for designers to modify and update the color palette in a single location. This helps save time and reduces the risk of inconsistent color usage throughout the application.
Improved accessibility: With the ability to create color palettes that
meet accessibility standards, the fastn
color scheme framework helps
designers create websites that are accessible to all users.
Increased brand recognition: By using a consistent color scheme throughout
the website, the fastn
framework can help to reinforce a company's brand
and increase brand recognition. The use of specific colors can also evoke
emotions and feelings associated with the brand, helping to create a
stronger connection with users.
fastn
color scheme framework allows designers to
quickly create color schemes and apply them to a website, reducing the time
and effort required to create a professional-looking design. This can also
lead to faster development times, helping to get the website up and running
more quickly.
fastn
color scheme framework
provides a simple and effective approach for defining and implementing color
schemes, making it a valuable tool for designers to have in their arsenal.