You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

newframecss

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

newframecss

Framecss adalah sebuah framework CSS yang menyediakan berbagai macam library CSS untuk keperluan desain aplikasi web dan website. Framecss mendukung class dua bahasa yaitu bahasa Indonesia dan bahasa Inggris, sehingga Anda dapat menggunakan class seperti

1.1.5

latest

Source

npm

Version published: last year

Weekly downloads: 0

Maintainers: 1

Weekly downloads

Created: last year

Source

Framecss adalah Framework CSS Indonesia

Framecss Framework Open Source

Framecss adalah Framework CSS open source yang Menyediakan berbagai macam library CSS untuk keperluan Desain Aplikasi Web Responsible dan aplikasi web. CLASS bisa menggunakan bahasa Indonesia ataupun Inggris. misalnya : class="button" atau class="tombol" dan hasilnya sama. Singkatnya, Framecss mendukung class dua bahasa yaitu bahasa Indonesia dan bahasa Inggris

Framecss diciptakan dan di kembangkan oleh Nelsen Niko yang terinspirasi oleh beberapa CSS framework lain, seperti Bootstrap, Foundation, dan Bulma. Framecss menawarkan fitur-fitur unggulan seperti responsive design, grid system, custom components, dan theme customization. Framecss cocok digunakan untuk web desainer pemula dalam membuat web yang modern, elegan, dan mudah digunakan. ⭐ framecss css framework, let's go build your design with framecss Framework

Versi :

frame.1.1.5.css Demo Template

Framecss..?

Dokumentasi | Lihat kode CSS | Lihat Kode JS |

Status

Framecss 1.1.4

Nama	Deskripsi
Update	15-03-2023
Versi	1.1.4
Lisensi	MIT

Framecss 1.1.5

Nama	Deskripsi
Update	5-02-2024
Versi	1.1.5
Lisensi	MIT

Mulai

CDN

Framecss.CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/frame.min.css">

Framecss.JS

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/frame.js" defer="true"></script>

Slider.JS

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/slider.js" defer="true"></script>

jQuery.js, D3.js, Chart.js, Typed.js

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/jq.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/d3.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/chart.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/typed.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/plot.js" type="text/javascript" charset="utf-8"></script>

Another js

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/ftema.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/cp.js" type="text/javascript" charset="utf-8"></script>

NPM

framecss.1.1.5

npm i newframecss

npm i getframecss

Github

git clone https://github.com/nelsenpro/newframecss.git

git clone https://github.com/nelsenpro/framecss.git

Zip File

Download Zip

see other source on :

Starter Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/frame.min.css">
    <script src="https://cdn.jsdelivr.net/gh/nelsenpro/newframecss/data/frame.js" defer="true"></script>
    <script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/slider.js" defer="true"></script>
    <title>Mulai Framecss</title>
</head>
<body>
    <h1 class="red">Welcome</h1>
</body>
</html>

Breakpoints :: Media Queries

Mobile Phones : class="col"

Dibawah 599px = class="col-"

[class*="col-"] {
    width: 100%;
}

Tablets : class="col-s-1"

dari 600-767px = class="col-s-1"

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: var(--col1);
    }
    .col-s-2 {
        width: var(--col2);
    }
    .col-s-3 {
        width: var(--col3);
    }
    .col-s-4 {
        width: var(--col4);
    }
    .col-s-5 {
        width: var(--col5);
    }
    .col-s-6 {
        width: var(--col6);
    }
    .col-s-7 {
        width: var(--col7);
    }
    .col-s-8 {
        width: var(--col8);
    }
    .col-s-9 {
        width: var(--col9);
    }
    .col-s-10 {
        width: var(--col10);
    }
    .col-s-11 {
        width: var(--col11);
    }
    .col-s-12 {
        width: var(--full);
    }
}

Desktop : class="col-1"

diatas 767px : class="col-1"

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: var(--col1);
    }
    .col-2 {
        width: var(--col2);
    }
    .col-3 {
        width: var(--col3);
    }
    .col-4 {
        width: var(--col4);
    }
    .col-5 {
        width: var(--col5);
    }
    .col-6 {
        width: var(--col6);
    }
    .col-7 {
        width: var(--col7);
    }
    .col-8 {
        width: var(--col8);
    }
    .col-9 {
        width: var(--col9);
    }
    .col-10 {
        width: var(--col10);
    }
    .col-11 {
        width: var(--col11);
    }
    .col-12 {
        width: var(--full);
    }
}

Kamu dapat Mengubah kode

Kode

:root {}

Contoh Mengubah Warna:

Warna bawaan Framecss

--red: #e51400;
--green: #60a917;
--blue: #3e65ff;

Warna sesuai keinginan

--red: #FF0000;
--green: #008000;
--blue: #0000FF;

Begini caranya

    /* mengubah variabel warna sesuai keinginan */
:root {
        --red: #FF0000;
        --green: #008000;
        --blue: #0000FF;
    }
    /* nama class untuk warna font/teks */
    .red,
    .merah {
        color: var(--red);
    }
    .green,
    .hijau {
        color: var(--green);
    }
    .blue,
    .biru {
        color: var(--blue);
    }

HTML nya

<h3 class="merah">teks ini merah</h3>
<p class="green">teks ini hijau</p>
<h5 class="biru">teks ini biru</h5>

Creator

Blog | Tiktok | Youtube | Nelsen Niko

Thanks for :

Keywords

FAQs

What is newframecss?

Is newframecss popular?

Is newframecss well maintained?

Package last updated on 11 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

newframecss

Framecss adalah Framework CSS Indonesia

Framecss Framework Open Source

Versi :

Framecss..?

Status

Framecss 1.1.4

Framecss 1.1.5

Mulai

CDN

jQuery.js, D3.js, Chart.js, Typed.js

Another js

NPM

Github

Zip File

see other source on :

Starter Template

Breakpoints :: Media Queries

Mobile Phones : class="col"

Tablets : class="col-s-1"

Desktop : class="col-1"

Kamu dapat Mengubah kode

Kode

Contoh Mengubah Warna:

Warna bawaan Framecss

Warna sesuai keinginan

Begini caranya

HTML nya

Creator

Thanks for :

Keywords

Related posts

Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape

Introducing License Overlays: Smarter License Management for Real-World Code