feneko.css

Feneko is a lightweight modern CSS framework contained in a single file inspired by Bulma and Matcha. It's designed to both be simple and fast to work with, while still looking good and having plenty customization.

Semantic styling is used whenever possible. Many semantic elements such as section and header work out of the box, and so do many others. It's still very similar to Bulma, but simplified to remove unnecessary boilerplate.

The name and default color scheme comes from Fenneko (フェネ子) in Aggretsuko.

Getting started

Just add a reference to feneko.css and you're good to go. If you would like to make use of the Atkinson Hyperlegible fonts and Google Symbols font styles, include feneko-fonts.css as well.

Layout

section

Sections are sections of a page with automatic padding.

<section>
	<p>Hello, world.</p>
</section>

main

This element behaves the same as a section, but is more semantically correct as a main page content container.

header

Headers are "hero" sections that have a larger padding than regular sections and can be colored. The padding can be adjusted using the s, l, xl, xxl, and xxxl classes. The float class can be added to make this a "floating" header that is more appropriate for arbitrary positions on the page.

<header>
	<h1>Melissa's Website</h1>
	<h2>Scribblings of a programatrickerist.</h2>
</header>

footer

Footers are sections specially made for the bottom of the page. Text within this section is automatically aligned to the center, sized a bit smaller than normal, and dimmed slightly.

<footer>&copy; Melissa Geels 2026</footer>

nav.bar

Horizontal navigation bar used for navigating between different pages. You can optionally add the fixed class to fix the navigation bar to the top of the page, following the user's scrolling. The float class can also be added in order to make it a "floating" navigation bar that is more appropriate for arbitrary positions on the page.

Items within the navigation bar must be .item, and can optionally be contained within a .container if needed. Apply the active class to highlight the item is currently active (eg. the current page). Usually items would be a tags, but if they are not (like a div) they can contain other content as well. Note that this may stretch the bar in height and removes the mouse hover and active styles.

The brand class can be added on top of the item class to make the text a little bolder, which is usually used for the brand name of the website.

<nav class="bar">
	<a href="/" class="item brand">Melissa</a>
	<a href="/about" class="item">About</a>
	<a href="/contact" class="item">Contact</a>
</nav>

You can add dropdowns to navigation bar items using .item.dropdown. The item content should stay as normal, but with an additional .dropdown element inside of it that will be the dropdown contents. You can also add hr elements between items in the dropdown.

<nav class="bar">
	<div class="item dropdown">
		Pages

		<div class="dropdown">
			<a href="/" class="item">Home</a>
			<hr>
			<a href="/about" class="item">About</a>
			<a href="/contact" class="item">Contact</a>
		</div>
	</div>
</nav>

nav.tree

Vertical navigation tree often seen on the left of a page. Items should be a.item elements, .header elements, or a tree of nested .group elements. This can also be colored. Use the active class to specify that an item is currently active.

<nav class="tree">
	<a href="#" class="item">Item 1</a>
	<a href="#" class="item">Item 2</a>
	<a href="#" class="item">Item 3</a>
	<a href="#" class="item">Item 4</a>

	<div class="group">
		<div class="header">Lettered items</div>
		<a href="#" class="item">Item A</a>

		<div class="group">
			<div class="header">B and C</div>
			<a href="#" class="item active">Item B</a>
			<a href="#" class="item">Item C</a>
		</div>

		<a href="#" class="item">Item D</a>
	</div>
</nav>

.container

The container element is centered within its parent and has a maximum width. It's usually used as a way to avoid pages becoming too wide on large displays. Containers can be placed within most layout elements, including nav.bar.

.columns

Responsive columns used for horizontal layouts on the page for desktop and mobile displays. Simply add as many .column elements as needed, and they will automatically spread within the container.

<div class="columns">
	<div class="column">Column A</div>
	<div class="column">Column B</div>
	<div class="column">Column C</div>
</div>

Use the center class to center columns in the container. This is only visible when you're not filling up the entire width. (See also the shorthand .center-half.)

<div class="columns centered">
	<div class="column half">
		This stays in the center.
	</div>
</div>

You can also apply the multiline class to wrap columns if they are larger than the container can hold:

<div class="columns multiline">
	<div class="column half">Column A</div>
	<div class="column half">Column B</div>
	<div class="column half">Column C</div>
</div>

Column sizing is handled by adding one of the following classes:

Class | Description -----------|-------------------------------------------------------------------- narrow | Fits the column to its contents. half | Half of the size. Equivalent to s6. full | 100% of the size. Equivalent to s12. third | One third of the size. Equivalent to s4. thirds | Two thirds of the size. Equivalent to s8. quarter | One quarter of the size. Equivalent to s3. quarters | Two quarters of the size. Equivalent to s9. s1 | 1 12th of the size. s2 | 2 12th of the size. s3 | 3 12th of the size. Equivalent to quarter. s4 | 4 12th of the size. Equivalent to third. s5 | 5 12th of the size. s6 | 6 12th of the size. Equivalent to half. s7 | 7 12th of the size. s8 | 8 12th of the size. Equivalent to thirds. s9 | 9 12th of the size. Equivalent to quarters. s10 | 10 12th of the size. s11 | 11 12th of the size. s12 | 100% of the size. Equivalent to full.

.center-half, .center-thirds

On desktop screens, content within this element will be centered on the page for half or two thirds of the width respectively, making them equivalent to a single column contained within a .columns.center.

<!-- This is the same as `.columns.center > .column.half` -->
<div class="center-half">
	<p>Hello world</p>
</div>

Components

.box

Box with a color that can contain some information, usually used to signal users to something worth noting, which can also be colored.

Note that there is also .notification, which should be preferred if the purpose of the box is to show some kind of short notification text.

You can use the .outline class to make this an outlined box instead; eg. the background will be transparent and only the border is colored.

<div class="box">This is a simple box.</div>

.notification

Notifications are boxes (.box), but with some additional features to make it more convenient for single-line notifications.

If a notification has an icon (i.icon), its contents will be aligned to the right of the icon without wrapping to the horizontal position of the icon.

<div class="notification">
	<i class="icon">help</i>
	This is a notification with an icon.
</div>

Note that you will need to use a span element if you intend to use further elements as part of its contents.

<div class="notification">
	<i class="icon">help</i>
	<span>This is a notification with an icon and <i class="icon">computer</i> another icon.</span>
</div>

code

Inline code formatting which can also be colored.

pre

Code block formatting which can also be colored.

blockquote

Block quote which can also be colored.

button, .button

Button which can also be colored. This can either be a form button or a link with the button class. For a slightly smaller button you can add the small class. You can use the outline class to make this an outlined button instead: the background will be transparent and only the border is colored.

Multiple buttons can be grouped together in a .buttons container, which allows controlling the layout easier as well as apply some styles to all buttons at once. The available classes for this are small and invert.

<div class="buttons small">
	<button>I'm a small button</button>
	<button>Hey me too!</button>
</div>

The .buttons container also accepts an optional multiline class that makes buttons wrap to the next line.

table

Tables which can also be colored. A few additional option classes are available:

Class | Description ------------|------------------------------------------------------------------- fullwidth | Let the table fill the entire width of the available space. striped | Every other row will have a subtle background color.

Use thead to specify header rows, and tbody for the rows themselves.

progress

Progress bars which can also be colored. Animates when the maximum or value attributes are not set as an indeterminate progress bar.

<progress></progress>
<progress max="100" value="50"></progress>

.field

Container for form fields. This doesn't provide a lot of functionality in itself except for some minor styling and logical grouping of input fields, making it an optional container for forms.

You can contain an automatically bolded label and a dimmed p.help element:

<div class="field">
	<label for="name">Name</label>
	<input type="text" id="name" placeholder="Melissa">
	<p class="help">I need to know your name, please!</p>
</div>

If the input (or textarea) after a label has the required attribute, the label will automatically have an asterisk with the --fg-danger color. For elements that are not necessarily a standard form input element, you can use label.required as well.

input, select, textarea

Input elements can be colored. You don't necessarily need to put them inside .field elements, but it does have some extra functionality if you do.

<input type="text">

Checkboxes should be inside of labels to work well:

<label>
	<input type="checkbox">
	I agree to the terms of service
</label>

.tag

Tags are small indicators used to indicate some status. They can also be colored. Typically these are rendered in-line using span.tag.

Multiple tags can be grouped together in a .tags container, allowing them to be layed out easier as well as set options for all tags at once. Tags containers can have the addons class, which groups multiple tags together to form one big tag composed out of multiple colors.

Note that you can use both div.tags and span.tags; the former will render as a block, while the latter works in-line. It's possible to put span.tags inside of div.tags to combine multiple regular tags with addon tags:

<div class="tags">
	<span class="tag">Feneko</span>
	<span class="tags addons">
		<span class="tag">Version</span>
		<span class="tag primary">0.1</span>
	</span>
</div>

The .tags container also accepts an optional multiline class that makes tags wrap to the next line.

nav.breadcrumb

Page breadcrumbs allow users to navigate within a page hierarchy.

<nav class="breadcrumb">
	<ul>
		<li><a href="/">Feneko</a></li>
		<li><a href="/docs">Documentation</a></li>
		<li><a href="/docs/nav">Navigation</a></li>
		<li>Breadcrumbs</li>
	</ul>
</nav>

hr

Horizontal rule element which can also be colored.

i.icon

Icon from the Google Symbols icon font. This requires you include the additional feneko-fonts.css file as well.

<button>
	<i class="icon">home</i>
	Home
</button>

Themes

There are several themes that can be applied through CSS variables. A couple default themes are shipped with Feneko. To use a theme, the class of the body tag needs to have the theme class as well as a theme name.

<body class="theme dark-green">

The available themes are:

Theme | Description -------------|------------------------------------------------------------------ light | (Default) Light theme. dark | Dark theme. dark-green | Dark green theme.

With this system, custom themes can be created as well. Please refer to the existing themes in Feneko to find out how to write them and which variables are available.

body.theme.my-theme {
	/* ... */
}

Colors

Several colors are specified by default, and can be applied to most elements. To apply a color to an element, simply add the associated class name to it.

Class name | Description ------------|------------------------------------------------------------------- primary | Theme-specific. Usually an accent color. secondary | Theme-specific. Usually complementary or analogous to the primary. success | Typically green. warning | Typically yellow. danger | Typically red. link | Typically analogous to the color of links. deep | Different tint or shade from the background color. subtle | Like deep, but more subtle.

Most elements also support the invert class which can switch between light and dark colors ("subtle" or "deep" colors).

Color variables

Colors are just classes, and can be applied to anything to give the element some variables prefixed with --sub-:

Variable | Description ------------------|------------------------------------------------------------- --sub-bg | Background color. --sub-bg-subtle | Subtle background color. --sub-fg | Foreground color. --sub-fg-subtle | Subtle foreground color.

These variables can be used in your own css classes to apply any theme color.

Color inheritance

Since colors are inherited from its parent (the --sub-* variables are kept), any elements within colored elements will also get coloring applied. For example:

<div class="notification warning">
	<button class="invert">Inverted warning button</button>
</div>

You can avoid this behavior by resetting the color in the DOM using .reset. This simply resets the --sub-* variables to what they would be if you did not apply any coloring. For example:

<div class="notification warning">
	<p class="reset">
		<button class="invert">Inverted button</button>
	</p>
	<p>
		<button class="invert">Warning inverted button</button>
	</p>
</div>

Custom colors

You can easily add custom colors by creating a single CSS class. For example, if you would like to create a tertiary color, just assign the variables above:

.tertiary {
	--sub-bg: #7a06bd;
	--sub-bg-subtle: color-mix(in lch, var(--sub-bg), var(--bg) 70%);
	--sub-fg: #eed3fe;
	/* --sub-fg-subtle can be omitted if you'd like to use the theme's --fg */
}

You can then use them for most Feneko elements, for example:

<div class="notification tertiary">
	This is a notification
</div>

Helper classes

.text-color

Sets the color of the text to var(--sub-bg). This means you can use any defined color as the text color.

<p class="text-color danger">This text is red!</p>
<p class="text-color warning">This text is yellow!</p>

.text-left, .text-center, .text-right, .text-justify

Text alignment helpers that will set the text-align CSS property to its respective value.

.ml-N, .mr-N, .mt-N, .mb-N

These helper classes add margin to either the left, right, top, or bottom, respectively. The amount of margin is specified by N which is a number between 0 and 6 (inclusive). This will use var(--spacing-helper-N) for the margin value. Use 0 for N to undo any previously specified margins.

<!-- The second span will have a large left margin -->
<span>Hello</span><span class="ml-6">World</span>

.pl-N, .pr-N, .pt-N, .pb-N

Identical to the margin helpers described above, except this sets the padding instead.

.hidden-desktop

Elements with this class will be hidden on desktop sizes.

.hidden-mobile

Elements with this class will be hidden on mobile sizes.

License

Feneko is licensed under the MIT NON-AI License.