Framecss3 NPM | npm.io

Fitur Framecss Framework adalah

Fitur Framecss adalah Grid Design/Grid System, Padding, Margin, Border Radius, Typography, Ketinggian, Lebar, Ukuran, Tooltip, Akordion, Efek gambar, Fonts, Halaman, Slideshow/Slider Gambar, Linklist, Card, Blockquote, Form, Menu Navigasi, Blok Header, Modals, Button/Tombol, Tabel, Warna, Background Warna, Animasi, Icons, btnTop clik, Breadcrumb

Framecss Framework Open Source

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/framecss/data/frame.1.1.5.css">

Framecss.JS

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

Slider.JS

<script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/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.4

npm i getframecss

Github

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/framecss/data/frame.1.1.5.css">
    <script src="https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.min.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 :

framecss framecss3 css library css framework framework css nelsen niko css framework indonesia framework css indonesia best css Framework basic css framework framecss3 framecss framework

@everything-registry/sub-chunk-1700

3 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago