[School Assignment] As part of my Advanced Web Design class, I present a film noir CSS framework.
Written using Sass, this CSS Framework consists of:
- film-base.css - all base layout styles
- film-noir.css - dark theme
- film-blanche.css - light theme
View the Framework in action: https://euripidean.com/film-noir
For the full effect, it's recommended that you download and import the following fonts: Noir Medium and Noir Regular by Sandy from Cufonfonts: https://www.cufonfonts.com/font/noir
To use film-noir in your project:
<head>
...
<link rel="stylesheet" href="./styles/film-base.css" />
<link rel="stylesheet" href="./styles/film-noir.css" id="noir-theme" />
<link
rel="stylesheet"
href="./styles/film-blanche.css"
id="blanche-theme"
disabled
/>
...
</head>
Tags supported
body, html
h1, h2, h3, h4, h5, h6
h1 class="title"
p, strong, center
code
section
a, a:hover, a:visited
.navbar
.navbar .right
.navbar. left
.bordered (adds art deco style border when applied to an element)
button, button .danger, button .action and hover states
submit button
form
form.no-border (removes default art-deco border and darker/lighter background color)
inputs: checkbox, radio, select
footer with ul and li
You can also select to have the film-blanche colour scheme applied instead by including blanche instead of noir in the head of your project:
