Getting started with Neptune CSS
Tags: css, beginners, framework, opensource
Published: 2023-06-09 01:48:16

---
title: Getting started with Neptune CSS
published: true
description: A quick start tutorial for Neptune CSS. Get to know a practical CSS framework and develop websites even faster and easier.
tags: CSS, beginner, framework, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84btwnj0qplqejspnt9o.png
# published_at: 2023-06-08 03:47 +0000
---

This is a quick start tutorial for Neptune CSS. Get to know a practical CSS framework and develop websites even faster and easier.

[What is Neptune CSS?](#what-is-neptune-css-?) • [Install](#install) • [Configuration](#configuration) • [Conclution](#conclution) • [Social Media](#social-media)

---

## What is Neptune CSS?

[Neptune CSS](https://www.neptunecss.org) is a lightweight CSS framework. It is free and you can use it for your Open Source projects.

## Install

Let's start with setting up our project. So open a new project in your IDE and type the following lines of code into your terminal.

```
npm init
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0hi07fzv3x8oln1zsuw.png)

Answer the questions and type

```
npm install neptunecss
```

if you want to use javascript too type

```
npm install neptunecss-js
```

Then import the packages. You can also use the CDN links.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">
```

```html
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
```

### Example

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Import example style -->
        <link rel="stylesheet" href="/examamples/example_style.min.css">

        <!-- Import Neptune CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@latest/neptune.min.css">

        <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"> 
        <title>Title | Neptune examples</title>
    </head>
    <body>
        <div class="select-box" id="mySelect">
            <span class="text-l">Select</span>
            <select class="hidden-select">
                <option value="null">Select</option>
                <option value="1">Value 1</option>
                <option value="2">Value 2</option>
                <option value="3">Value 3</option>
            </select>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
    </body>
</html>
```

See Example on [GitHub](https://github.com/neptune-css/quick-start)

> HINT - Install the [Snippets extension](https://marketplace.visualstudio.com/items?itemName=NeptuneCSS.neptunecss-snippets) for VS Code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sms796cjwoe4o190zssc.png)

---

## Configuration

### Colors

Setup the Background colors, the font colors, the system colors and the primary and accent color. You have to set only one value, the color hue(hsl). See the [Documentation](https://neptunecss.org) for all color variables and default values.

#### Example

```css
/* Setup Colors */
--background-dark: {Your Value};
```

### Transition Duration

```css
/* Setup Transition Duration */
--transition-duration: .4s;
```

For more Configuration see the [Documentation](https://neptunecss.org).

---

## Conclution

[Neptune CSS](https://neptunecss.org) is an fast and ultra light CSS framework. Configurate your project and develop faster.

---

## Social Media

[Twitter](https://twitter.com/neptunecss) | [Instagram](https://www.instagram.com/neptune.css/) | [NPM](https://www.npmjs.com/package/neptunecss)

---

## Author

[Colin Grahm](https://dev.to/cgwebdev2003)