Fundations
Explore the core principles of all themes
Colors
Each template adheres to a standardized system for colors, with some utilizing custom color palettes that are accessible via the tailwind.config.cjs configuration file.
# Change colors on this file
tailwind.config.cjs
As previously noted, certain templates feature bespoke color schemes, which may include a change on the nomenclature.
Using Tailwind’s config file
Here for example, the color palette in question has been named as “Vulcan.”
module.exports = {
theme: {
colors: {
vulcan: {
50: "#BACDD5",
100: "#AEC2CE",
200: "#94ACBE",
300: "#7B95AF",
400: "#617CA0",
500: "#526587",
600: "#424F6D",
700: "#333A54",
800: "#23273A",
900: "#141521",
},
},
},
};
Arbitrary Values
It is possible that some templates may utilize a single color in a specific location or for a particular element, resulting in a visual representation similar to the one displayed. This ones are called
<!-- Color palette example from The template Navy -->
<h1 class="text-[#0000ff]" >Requirements</h2>
If you want to learn more about how colors on Tailwind CSS works read it on Tailwind’s documentation.
Typography
The templates do not employ native fonts. Rather, they rely on content delivery networks (CDNs) from various font providers, such as:
Occasionally, a website template may utilize a CDN to access proprietary fonts that are not included in the package. These fonts are typically used for visual enhancements and are not necessary for the functioning of the template.
Adding or changing CDN
Linking the font from the BaseHead.astro file.
<!-- src/components/BaseHead.astro -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
Adding the font on the Tailwind’s config file
// tailwind.config.cjs
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
mono: ["JetBrains Mono", ...defaultTheme.fontFamily.sans],
},
},
},
};
Adding root styles
/* src/styles/global.css - not a must */
:root {
font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
:root {
font-family: "Inter var", sans-serif;
}
}
In each UI Kit and blog templates, a dedicated page detailing font styling is included. To access this page, a link is provided in the navigation menu on each page of the template.
If you want to learn more about typography on Tailwind CSS works read it on Tailwind’s documentation.
Components
All templates incorporate components, with each section representing a distinct component. Both the navigation bar and footer are also treated as components. These components have not been simplified into smaller elements, such as buttons, to allow for greater ease in mixing and matching various sections.
Each component is contained within its own dedicated folder. For instance, the features component is located within the “features” folder.
components
-
features
- FeatureOne.astro
- FeatureTwo.astro
- FeatureThree.astro
- FeatureFour.astro
Plugins & integrations
Tailwind plugins
All templates are equipped with an array of Tailwind plugins. To review the plugins integrated into a specific template, navigate to the tailwind.config.cjs file located in the root of the project.
This is an example.
// tailwind.config.cjs
module.exports = {
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
]
}
If you want to learn more about Tailwind CSS plugins read it on Tailwind’s documentation.
Astro plugins and integrations
All templates are equipped with an array of Astro plugins and/or integrations. To review the plugins integrated into a specific template, navigate to the astro.config.mjs file located in the root of the project, located at the bottom of the file tree.
Presented below is a visual depiction of the integrations utilized in the UI Kits.
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
export default defineConfig({
site: 'https://lexingtonthemes.com',
integrations: [tailwind(), sitemap()]
});
Displayed below is a representation of the blog integrations. Note that MDX has been integrated and employs shiki for Markdown, accompanied by a custom theme.
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import mdx from "@astrojs/mdx";
export default defineConfig({
markdown: {
shikiConfig: {
wrap: true,
skipInline: false,
drafts: false
}
},
site: 'https://lexingtonthemes.com',
integrations: [tailwind(), sitemap(), mdx()]
});
Here is a list of the integrations used on the themes:
If you want to learn more about Astro’s config read it on Astros’s documentation.
Syntax highlighting
Astro comes with built-in support for Shiki and Prism. This provides syntax highlighting for:
- All code fences (```) used in a Markdown or MDX file.
- Content within the built-in
<Code />component (powered by Shiki). - Content within the
<Prism />component (powered by Prism).
On Lexington, the templates using syntax highlighting are using custom themes or other themes on the VS Code marketplace.
On the blog templates, there’s a file called custom-theme.json file located in the root of the project, located at the bottom of the file tree.
Shiki CSS variables are being use, and they look like this
:root {
--astro-code-color-text: theme(textColor.neutral.600);
--astro-code-token-link: theme(textColor.white);
--astro-code-token-keyword: theme(textColor.black);
--astro-code-token-function: theme(textColor.black);
--astro-code-token-parameter: theme(textColor.white);
--astro-code-color-background: theme(backgroundColor.neutral.50);
--astro-code-token-punctuation: theme(textColor.white);
--astro-code-token-string: theme(textColor.neutral.800);
--astro-code-token-comment: theme(textColor.neutral.400);
--astro-code-token-constant: theme(textColor.neutral.700);
--astro-code-token-string-expression: theme(textColor.accent.600);
}
If you want to learn more about Shiki read it on Shiki’s documentation.
The custom themes utilized in some of the templates are available on Michael’s Visual Studio code theme collection.
Note If you have any inquiries regarding these themes, please do not hesitate to ask, as I am the individual responsible for creating them.
AlpineJS
All templates are using Alpine.js for dynamic components, like toggles, tabs, navigation.
If you want to learn more about Alpine.js read it on Alpine’s documentation.