DEV Community: CGWebDev2003

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

Awesome VS Code Themes

CGWebDev2003 — Sun, 21 May 2023 10:42:00 +0000

Andromeda

GitHub | VS Code

Bearded Theme

GitHub | VS Code

Bluloco Dark Theme

GitHub | VS Code

What is your favorite theme?

3 Lightweight CSS Frameworks

CGWebDev2003 — Sat, 20 May 2023 03:29:44 +0000

Milligram

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

GitHub

Neptune CSS

Neptune CSS is free and open source. It is a lightweight CSS framework and makes you webdesign faster. You can setup your project by changing a few variables.

GitHub Twitter Instagram

Pure CSS

Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

GitHub

Support my Social Media

GitHub Twitter Instagram