minframecss
Advanced tools
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
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 |
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>
<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.5
npm i minframecss
git clone https://github.com/nelsenpro/minframe.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/minframe/frame.min.css">
<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 minframecss receives a total of 3 weekly downloads. As such, minframecss popularity was classified as not popular.
We found that minframecss 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
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.