VS Code Snippets Extension

CGWebDev2003 — Sat, 10 Jun 2023 22:28:47 +0000

What is a snippet extension? • Install Neptune Snippets • Start with an example page • Usage • Social Media • Author

What is a snippet extension?

A snippet extension is like a plugin for VS Code. You will get suggested code fragments while you are writing it. It is like a shortcut for coding.

You can get VS Code extensions on the VS Code Marketplace for free. Just download them and you can start developing even faster.

Install Neptune Snippets

You can install Neptune CSS Snippets in the marketplace or as NPM package as well.

Start with an example page

To start with an example page just type

neptune-example-page

Hit Enter and you get the boilerplate code for a simple Neptune CSS project page.

To add the CDN links use

nep-css-cdn

nep-cdn-js

Usage

To use the Neptune Snippets for CSS beginn to type neptune-. If you want to use it for JavaScript type only nep- . You can find all commands in the Snippets Documentation.

Social Media

GitHub | Twitter | Instagram | NPM

Author

Colin Grahm

Getting started with Neptune CSS

CGWebDev2003 — Fri, 09 Jun 2023 01:48:16 +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? • 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.

Social Media

Twitter | Instagram | NPM

Author

Colin Grahm

DEV Community: Neptune CSS

VS Code Snippets Extension

What is a snippet extension?

Install Neptune Snippets

Start with an example page

Usage

Social Media

Author

Getting started with Neptune CSS

What is Neptune CSS?

Install

Example

Configuration

Colors

Example

Transition Duration

Conclution

Social Media

Author