1.9 KiB
Ghost 👻
An abstract baseline css framework
What is it?
Ghost is not a framework, it'S merely a set of css variables which provide a nice foundation for small css projects and constistent styling.
The premise of ghost is that it should not be visible in your project.
What does it include?
Ghost includes the following components:
- Font size
- Spacing
- Colors
Font size
Configuration
The following values can be used to configure the font size:
:root {
--text-scale: 1.2;
}
Building on this value, these variables are available, where --text-sm is slightly less than 1em and --text-md is slightly more.
--text-xs
--text-sm
--text-md
--text-lg
--text-xl
--text-xxl
--text-xxxl
Spacing
Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. --spacing-3) doubles, the corresponding spacing should also double (--spacing-6).
--spacing-0: 0;
--spacing-px: 1px;
--spacing-05: 0.125rem;
/* 1 */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
/* 2 */
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-18: 4.5rem;
--spacing-20: 5rem;
/* 4 */
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
/* 8 */
--spacing-48: 12rem;
--spacing-56: 14rem;
--spacing-64: 16rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
Colors
Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
Every color has 10 values, --<color>-50 and from --<color>-100 and with --<color>-900.
The included colors are taken from the great Tailwind.css.
