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
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 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 FrameworkDokumentasi | Lihat kode CSS | Lihat Kode JS |
| Nama | Deskripsi |
|---|---|
| Update | 15-03-2023 |
| Versi | 1.1.4 |
| Lisensi | MIT |
| Nama | Deskripsi |
|---|---|
| Update | 5-02-2024 |
| Versi | 1.1.5 |
| Lisensi | MIT |
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>
<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>
<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>
framecss.1.1.4
npm i getframecss
git clone https://github.com/nelsenpro/framecss.git
Gitlab | | NPM | | Sourceforge | | Launchpad
<!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>
Dibawah 599px = class="col-"
[class*="col-"] {
width: 100%;
}
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);
}
}
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);
}
}
:root {}
--red: #e51400;
--green: #60a917;
--blue: #3e65ff;
--red: #FF0000;
--green: #008000;
--blue: #0000FF;
/* 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);
}
<h3 class="merah">teks ini merah</h3>
<p class="green">teks ini hijau</p>
<h5 class="biru">teks ini biru</h5>
Blog | Tiktok | Youtube | Nelsen Niko
Normalize.css | Animate.css | Fontsawesome | StaticSave | W3schools | Swiffy Slider | jQuery.js | D3.js | Chart.js | Plotly.js | Google
FAQs
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
The npm package framecss3 receives a total of 2 weekly downloads. As such, framecss3 popularity was classified as not popular.
We found that framecss3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Socket CEO Feross Aboukhadijeh joins Software Engineering Daily to discuss modern software supply chain attacks and rising AI-driven security risks.
Security News
GitHub has revoked npm classic tokens for publishing; maintainers must migrate, but OpenJS warns OIDC trusted publishing still has risky gaps for critical projects.
Security News
Rust’s crates.io team is advancing an RFC to add a Security tab that surfaces RustSec vulnerability and unsoundness advisories directly on crate pages.