Minframe - Framecss adalah Framework CSS Indonesia - CSS only
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 FrameworkVersi :
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
minframe.css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nelsenpro/minframe/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 minframecss
Github
git clone https://github.com/nelsenpro/minframe.git
Zip File
see other source on :
Gitlab | | NPM | | Sourceforge | | Launchpad
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/minframe/frame.min.css">
<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 :
Normalize.css | Animate.css | Fontsawesome | StaticSave | W3schools | Swiffy Slider | jQuery.js | D3.js | Chart.js | Plotly.js | Google