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? • Install • Configuration • Conclution • 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
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
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.
Top comments (0)