10 interesting Dart and CSS libraries for May 2019
Tags: dart, css, beginners, javascript
Published: 2019-05-04 10:34:43

Dart has hit another win lately, having been listed at [#12 of the most loved languages](https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted) according to the StackOverflow 2019 Annual Developer Survey. In light of that I have taken a look and hand-picked 10 of the most interesting Dart packages you can start working with along side CSS libraries you should shortlist for your next web project.

---

## 1. [dio](https://pub.dartlang.org/packages/dio)

[Dio](https://pub.dartlang.org/packages/dio) is a powerful library for making HTTP requests. It wraps Dart’s HttpClient class while extending it with support for features such as Interceptors, File Download, Request Cancellation, Timeout and several more. It can be configured globally and its super simple to use:

```dart
import 'package:dio/dio.dart';
void main() async {
  try {
    Response res = await Dio().get('https://news.ycombinator.com');
    print(res);
  } catch(e) {
    print(e);
  }
}
```

## 2. [BulmaCSS](https://bulma.io/)

[Bulma](https://bulma.io/) is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers, including myself. It provides helper classes for styling various UI elements while adopting a mobile-first responsive design approach. In fact I’ve worked with Bulma in [this tutorial series](https://creativebracket.com/build-a-chat-application-in-dart-part-1/).

## 3. [RxDart](https://pub.dartlang.org/packages/rxdart)

[RxDart](https://pub.dartlang.org/packages/rxdart) is a reactive functional programming library based on the ReactiveX JS counterpart. It’s one of the go-to solutions for state management in Flutter mobile apps, although it also works on server and web. RxDart builds on top of Dart’s pretty decent Streams API with extra functionality.

## 4. [Water.css](https://github.com/kognise/water.css)

[Water.css](https://github.com/kognise/water.css) is a _just-add-css_ collection of styles to make simple websites just a little nicer. It can easily be activated by sticking the CSS file in your `<head>` section:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
```

## 5. [html](https://pub.dartlang.org/packages/html)

[**html**](https://pub.dartlang.org/packages/html) is a pure Dart HTML5 parser. It’s a port of html5lib from Python. It’s got a straight-forward API and a useful application when [writing web scrapers](https://creativebracket.com/write-your-first-web-scraper/).

## 6. [animate.css](https://daneden.github.io/animate.css/)

[**Animate.css**](https://daneden.github.io/animate.css) provides _just-add-water_ CSS animations, simples! It’s got effects for bounce, pulse, shake and several more.

## 7. [markdown](https://pub.dartlang.org/packages/markdown)

[**markdown**](https://pub.dartlang.org/packages/markdown) is a portable Markdown library written in Dart. It can parse Markdown into HTML on both web and server. Points for whoever can combine this with the **html** library. Try it out at [https://dartlang.github.io/markdown](https://dartlang.github.io/markdown).

## 8. [DynCSS](https://www.vittoriozaccaria.net/dyn-css/)

[**DynCSS**](https://www.vittoriozaccaria.net/dyn-css/) parses your css for `-dyn-(attribute)` rules and then evaluates then via JS on browser events like `scroll` and `resize`. The result is applied to the CSS attribute you have specific in the `(attribute)` sufix. For the most part you only need to set CSS property/value pairs, but there also a JS API for custom functions, which can be accessed from Dart 🎯😉. Here’s of [demo](https://www.vittoriozaccaria.net/dyncss-example/) of this at work.

## 9. [pdf](https://pub.dartlang.org/packages/pdf)

[**pdf**](https://pub.dartlang.org/packages/pdf) creates PDF files for web and Flutter projects. It can create full multi-page documents with graphics, images and text using TrueType fonts. The library provides a low-level PDF creation utility that takes care of the bits generation and a Widget system similar to Flutter’s, for easy high-level PDF creation.

Example code:

```dart
final pdf = Document()
  ..addPage(Page(
    pageFormat: PdfPageFormat.a4,
    build: (Context context) {
      return Center(
        child: Text("Hello World"),
      ); // Center
    })); // Page
```

## 10. [Hover.css](http://ianlunn.github.io/Hover/)

[**Hover.css**](http://ianlunn.github.io/Hover/) provides a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. It can be applied to your own elements and modified too. Available in CSS, SASS and LESS.

---

## Sharing is caring

If you enjoyed reading this post, please share this through the various social buttons on this page. Also, check out and [**subscribe to my YouTube channel**](https://youtube.com/c/CreativeBracket) (_hit the bell icon too_) for videos on Dart with _Angular, Vue, React, HTTP, RESTful APIs, MongoDB_ and many more.

Visit [**creativebracket.com**](https://creativebracket.com) for more in-depth Dart tutorials.