Skip to content
George Treviranus edited this page Jun 16, 2018 · 6 revisions

Undernet is a front-end framework offering a flexible starting point for new web projects. It includes base styling for common tags, including buttons, forms, and typography. Also included is a flex-based grid and a handful of helper classes.

In addition to styling, Undernet also includes interactive components. Currently there are two: a modal and accordion component. They are easy to use and rely only on a script call, e.g., Undernet.Accordions.start() for example, and the correct markup structure. More components are planned!

What makes Undernet stand apart from other frameworks like Bootstrap, Bulma, or Foundation? Truthfully, Undernet started as an experiment to learn the ins and outs of CSS. Since last year, it has evolved into a functioning library that takes the best of many frameworks and puts it all into one easy-to-use package. It is highly configurable and even namespace-able. Undernet is still young, but I hope folks can use it, break it, and help make it even better!

Undernet's CSS and JavaScript will work in recent versions of these browsers:

  • Chrome ✓
  • Firefox ✓
  • Safari ✓
  • Microsoft Edge ✓

Undernet also fully supports Internet Explorer 11.

The framework has four core tenets:

  • Configuration: The framework comes with a configuration file that you can update with your intended brand attributes, including colors, typography, grid, forms, and more.
  • Semantics: HTML that is logical and written with accessibility in mind.
  • Modularity: The struggle with frameworks is they are usually dependent on being your core stylesheet. Undernet is specifically designed to be scoped and controlled as an alternative, to existing projects.
  • Agility: Because all that's needed is an understanding of semantic HTML and customizing SCSS in the beginning, you will quickly get to building without worrying about tons of custom styling/javascript.

Want to contribute? Check out the project on Github!

Cheers! – George T.

Next: Getting Started ►