CGWebDev2003
Getting started with Neptune CSS

Getting started with Neptune CSS

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

Colin Grahm's photo
Colin Grahm
·

2 min read

What is Neptune CSS? • Install • Configuration • Conclusion • Social Media

What is Neptune CSS?

Neptune CSS 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

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.

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

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

Example

<!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

HINT - Install the Snippets extension for VS Code

Image description

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 for all color variables and default values.

Example

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

Transition Duration

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

For more Configuration see the Documentation.

Conclution

Neptune CSS is an fast and ultra light CSS framework. Configurate your project and develop faster.

Social Media

Twitter | Instagram | NPM

Author

Colin Grahm

CSSwebdesignBeginner DevelopersHTML5JavaScript