DEV Community

Cover image for Getting started with Neptune CSS
CGWebDev2003 for Neptune CSS

Posted on • Edited on

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.

What is Neptune CSS?InstallConfigurationConclutionSocial 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
Enter fullscreen mode Exit fullscreen mode

Image description

Answer the questions and type

npm install neptunecss
Enter fullscreen mode Exit fullscreen mode

if you want to use javascript too type

npm install neptunecss-js
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@latest/neptune.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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};
Enter fullscreen mode Exit fullscreen mode

Transition Duration

/* Setup Transition Duration */
--transition-duration: .4s;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)