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

framecss3

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
Package version was removed
This package version has been unpublished, mostly likely due to security reasons

framecss3

[<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2SkG2t8NshC_wKAJhPhixCLtsYfzlLCBxRrMXfPXUNq8iLBtHzHFmkyQ36SedZw5CpGEIdFk0hfD1D8OykxFcqSueHpGuOQFwhaiX51P_0Tg670-0afL0-JmxDKcMCkSVF3LvNb_s92G3KAzexnFbsBT2vUqWo2Of5WL5VI6CqHFVor-zIE6yqat

1.0.1
unpublished
Source
npmnpm
Version published
Maintainers
1
Created
Source

Selamat Datang di ::Framecss Framework CSS

Menyediakan berbagai macam library CSS untuk keperluan Desain Aplikasi Web dan Website

Daftar isi :

Download

install offline di proyek

Terminal, Git, CMD : "git clone https://github.com/nelsenpro/frame.git"

unduh versi 1.1.23 Alpha via Github

unduh Versi 2.1.23 Alpha via Github

atau Koneksikan Framecss Online

<link rel="stylesheet" href="https://static.staticsave.com/edata/frame.css" type="text/css" media="all" />
<script src="https://static.staticsave.com/edata/frame.js" type="text/javascript" charset="utf-8"></script>

Deskripsi

NamaDeskripsi
Versi1.1.23 Alpha ; 2.1.23 Alpha
LisensiGNU GPL 3

Dokumentasi

Struktur Framecss

framecss-2.alpha/
├── data/
│ ├── animate.css
│ ├── base.css
│ ├── fonts/
│ │
│ │
│ ├── frame.css
│ ├── frame.js
│ ├── gambar/
│ └── normalize.css
├── index.html
├── modif.css
└── modif.js

Template Standar::Framecss

Float Layout

<!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">
            <!-- awal koneksi framecss -->
    <link rel="stylesheet" href="https://static.staticsave.com/edata/frame.css" type="text/css" media="all" />
            <!-- akhir koneksi framecss -->
    <title>Frame-CSS.1.Alpha</title>
</head>
<body>
    <div>
        <!-- bagian navbar-->
        <div class="" id="">
        <!-- akhir navbar-->
        
        <!-- bagian header, jumbotron- blok-->
        </div>
        <div class="">
            <h1 class="">Halo Dunia</h1>
            <p>
                ........
            </p>
        </div>
         <!-- akhir blok, jumbotron-->
         
         <!-- isi konten 1-->
        <div class="baris">
                <div class="utama samping">
                    <h2 class=""></h2>
                    <p></p>
                    <h2 class=""></h2>
                    <p></p>
                </div>
             <!-- akhir konten 1-->
             
             <!-- isi konten 2-->
                <div class="utama tengah">
                    <h2 class=""></h2>
                    <p></p>
                    <h2 class=""></h2>
                    <p></p>
                </div>
             <!-- akhir konten 2-->
             
             <!-- awal footer-->
        </div>
        <div class="kaki">
            <p class=""></p>
        </div>
           <!-- akhir footer-->
    </div>
        <!-- koneksi ke JavaScript-->
     <script src="https://static.staticsave.com/edata/frame.js" type="text/javascript" charset="utf-8"></script>
          <!-- akhir koneksi JavaScript-->
</body>
</html>

Grid Layout

Grid 2 items

<!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://static.staticsave.com/edata/frame.css" type="text/css" media="all" />
    <title>Document</title>
</head>
<body>
    <div class="framecss-grid2">
        <div class="kepala">
            <h2>Kepala</h2>
        </div>

        <div class="badan-kiri">
            Badan Kiri
        </div>
        <div class="badan-tengah">
            Badan Tengah
        </div>

        <div class="kaki">
            <p>
                Kaki
            </p>
        </div>
    </div>
 <script src="https://static.staticsave.com/edata/frame.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Grid 3 items

<!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://static.staticsave.com/edata/frame.css" type="text/css" media="all" />
    <title>framecss</title>
</head>
<body class="putih framecss">
    <div class="framecss-grid">
       <div class="kepala">
           <h1 class="hitam">Selamat Datang di Framecss Indonesia</h1>
           <small class="hitam">
               versi <i>2.1.23</i> <b>Alpha</b> 
           </small>
       </div>
       <div class="badan-kiri lbs-hijau">
           <div class="">
               <h2 class="">badan samping</h2>
           </div>
       </div>
       <div class="badan-tengah lbs-oren">
           <div class="">
               <h2 class="">badan tengah</h2>
           </div>
       </div>
       <div class="badan-kanan lbs-merah">
           <div class="">
               <h2 class="">badan kanan</h2>
           </div>
       </div>
       <div class="kaki">
           <h2 class="hitam">Kaki</h2>
       </div>
    </div>
 <script src="https://static.staticsave.com/edata/frame.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Membangun Header

Header Navigasi

<div class="nav" id="nav">
    <a href="#home" class="active">Beranda</a>
    <a href="#berita">Berita</a>
    <a href="#contact">Hubungi</a>
    <a href="#about">Tanya</a>
    <a href="#unduh">Unduh</a>
    <a href="#contoh">Contoh</a>
    <a href="javascript:void(0);" class="icon" onclick="navFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

<div class="nav-hijau" id="nav-hijau">
    <a href="#home" class="active">Beranda</a>
    <a href="#news">Berita</a>
    <a href="#contact">Hubungi</a>
    <a href="#about">Tanya</a>
    <a href="#unduh">Unduh</a>
    <a href="#contoh">Contoh</a>
    <a href="javascript:void(0);" class="icon" onclick="hijauFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

Header Panel

Membangun Header Panel

Panel Default

<div class="kepala">
    <h1 class="hitam">Selamat Datang di Framecss Indonesia</h1>
    <small class="hitam">
        versi <i>2.1.23</i> <b>Alpha</b>
    </small>
</div>

Panel modifikasi Latar

<div class="nav-ping" id="nav-ping">
    <a href="#home" class="active">Beranda</a>
    <a href="#news">Berita</a>
    <a href="#contact">Hubungi</a>
    <a href="#about">Tanya</a>
    <a href="#unduh">Unduh</a>
    <a href="#contoh">Contoh</a>
    <a href="javascript:void(0);" class="icon" onclick="pingFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

Panel modifikasi Latar Animasi

<div class="nav-kuning animasi-latar" id="nav-kuning">
    <a href="#home" class="active">Beranda</a>
    <a href="#berita">Berita</a>
    <a href="#contact">Hubungi</a>
    <a href="#about">Tanya</a>
    <a href="#unduh">Unduh</a>
    <a href="#contoh">Contoh</a>
    <a href="javascript:void(0);" class="icon" onclick="kuningFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

Membangun Tombol

tombol default

<button class="tombol" type="submit">Tombol</button>

tombol modifikasi

<button class="tombol bayang-merah u10px" type="submit">Tombol</button>
<button class="tombol-kuning r12px" type="submit">Tombol</button>
<button class="tombol-ping r8px bayang" type="submit">Tombol</button>
<button class="tombol-magenta u25px bayang-hijau" type="submit">Tombol</button>

tombol grup : Float pakai section, grid pakai div

<section class="grup-tmb" style="width:">
    <button class="r12px frame expand" judul="tombol ini radius 12px" onclick="" style="width:">AcdEF</button>
    <button class="u20px frame swing" judul="tombol ini radius 20px" onclick="" style="width:">BcDefG</button>
    <button class="u10px" onclick="" style="width:">Cdefg</button>
    <button class="r8px" onclick="" style="width:">DefGh</button>
    <button class="u1px" onclick="" style="width:">EfGhij</button>

</section>
<br />
<section class="grup-tmb-v" style="width:auto">
    <p>
        grup vertikal : animasi latar berubah
    </p>
    <button class="frame fade" judul="ukuran 50%" onclick="" style="width:50%">Abcde</button>
    <button onclick="" style="width:50%">BcDefg</button>
    <button class="frame aframe" onclick="" style="width:50%">CdEfgh
        <span class="teks">tombol ini ukuran 50%</span></button>
    <button onclick="" style="width:90%">DefGHi</button>
    <button onclick="" style="width:40%">EFgHI</button>
    <button onclick="" style="width:15%">F</button>
    <button onclick="" style="width:60%">G</button>
    <br />
</section>

Membangun Tabel

tabel default

<table class="tabel ta l80">
    <tr>
        <th>Nama</th>
        <th>Class</th>
    </tr>
    <tr>
        <td>Hijau</td>
        <td>hijau</td>
    </tr>
</table>

tabel modifikasi

<input type="text" id="ketikkan" onkeyup="fungsicariTabel()" placeholder="cari nama..">
<table id="caritabel" class="tabel-magenta">
    <tr>
        <th>Nama</th>
        <th>Class</th>
    </tr>
    <tr>
        <td>Hijau</td>
        <td>hijau</td>
    </tr>
    <tr>
        <td>Merah</td>
        <td>merah</td>
    </tr>
    <tr>
        <td>Magenta</td>
        <td>magenta</td>
    </tr>
</table>

Lanjutkan Dokumentasi atau Tutorial

Creators

Nelsen Niko

Thanks

Normalize.css | Animate.css | Fontsawesome | StaticSave | W3schools |

FAQs

Package last updated on 18 Feb 2023

Did you know?

Socket

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

Related posts

Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape

Research

/

Security News

Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape

A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).

By Jonathan Leitschuh  -  Aug 01, 2025
Introducing Rust Support in Socket

Product

Introducing Rust Support in Socket

Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.

By Trevor Norris  -  Jul 31, 2025