Uploaded by
Published on

ClassNames from multiple CSS frameworks.

Inspired by purescript-halogen-bootstrap5 and purescript-react-icons.


spago install css-frameworks


  • download - link to the docs section that explains how to download the .css file, preferably via CDN.
  • version - the framework version and the link to the .css file.
  • directory - framework directory in ./css.
  • license - framework license. Each directory contains a complete LICENSE file.

Framework lists were taken from purescript-react-icons and awesome-css-frameworks.


download version directory license
Bootstrap Icons 1.10.5 bootstrap-icons MIT
Boxicons 2.1.4 boxicons CC BY 4.0 License 2.0.0 MIT
Devicons 1.8.0 devicons MIT
Fontawesome 6.4.0, free for web fontawesome CC BY 4.0 License
Remix Icon 3.3.0 remixicon Apache License Version 2.0
Simple Line Icons 2.5.5 simple-line-icons MIT
Tabler Icons 2.21.0 tabler-icons MIT
Themify Icons latest themify-icons MIT
Typicons 2.1.2 typicons.font CC BY-SA 3.0
VS Code Icons latest vscode-codicons CC BY 4.0 License
Weather Icons latest weather-icons SIL OFL 1.1

Very Lightweight

download version directory license
Pure 3.0.0, pure, grids-responsive pure BSD-3-Clause
Milligram 1.4.1 milligram MIT
Picnic latest picnic MIT
Chota 0.9.2 chota MIT

General Purpose

download version directory license
Bootstrap 5.3.0 bootstrap MIT
Bulma 0.9.4 bulma MIT
Foundation 6.7.5 foundation MIT
UIkit 3.16.19 uikit MIT
Primer 21.0.2 primer MIT
Carbon 10.58.3 carbon Apache License 2.0


Module documentation on Pursuit (coming soon).


New framework

  1. Find the framework repo/site. Let's call it {site}.

  2. Find a framework (preferrably not minified) .css file. Let's call it {file}.

  3. Find the framework license text. Let's call it {license}.

  4. Let's call the link to that text a {link}.

  5. Create a directory for the framework .css in the ./css directory. Let's call the new directory {framework}.

  6. Create a file {framework}/LICENSE. Let's call it {LICENSE}.

  7. Copy the {file} into {framework}/all.css.

  8. If the {file} was minified, format it so that it's not minified.

  9. Compose the {LICENSE}. See an example. Add relevant sections.

    1. == License link
      ... {link} ...
    2. == License content
      ... {license} ...
  10. Edit a relevant table in Libraries.

  11. Install perl or use a Nix devshell.

  12. Run the generator.

  13. Commit, make a Pull Request.

Nix dev tools

This repo provides a Nix flake with PureScript tools.

  1. Install Nix.

  2. Start a devshell.

    nix develop
  3. (Optionally) use direnv.

    direnv allow

Release new version

  • Commit all changes.

  • Update the version appropriately.

    spago bump-version patch --no-dry-run
  • Push to GitHub.

    git push --follow-tags
  • Publish the package and docs.

    npx pulp login
    npx pulp publish