{"id":24804160,"url":"https://github.com/nelsenpro/framecss","last_synced_at":"2025-03-25T06:46:05.237Z","repository":{"id":194223930,"uuid":"690354130","full_name":"nelsenpro/framecss","owner":"nelsenpro","description":"Framecss adalah sebuah proyek open source yang menyediakan berbagai macam library CSS untuk keperluan desain aplikasi web dan website. Framecss diciptakan oleh Nelsen Niko.","archived":false,"fork":false,"pushed_at":"2024-06-03T12:49:00.000Z","size":3097,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T23:05:36.924Z","etag":null,"topics":["css","css-framework","css-framework-indonesia","framecss","nelsenniko","webdesign","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nelsenpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-12T03:14:34.000Z","updated_at":"2024-06-03T12:49:03.000Z","dependencies_parsed_at":"2024-01-30T17:40:06.252Z","dependency_job_id":"a5f26c8e-9284-492f-ba82-fab335d32bc0","html_url":"https://github.com/nelsenpro/framecss","commit_stats":{"total_commits":80,"total_committers":1,"mean_commits":80.0,"dds":0.0,"last_synced_commit":"026f238c12f969ca35918fba741803dbe6b19687"},"previous_names":["nelsenpro/framecss"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fframecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fframecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fframecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fframecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nelsenpro","download_url":"https://codeload.github.com/nelsenpro/framecss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245136405,"owners_count":20566588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","css-framework-indonesia","framecss","nelsenniko","webdesign","webdevelopment"],"created_at":"2025-01-30T06:15:22.928Z","updated_at":"2025-03-25T06:46:05.217Z","avatar_url":"https://github.com/nelsenpro.png","language":"CSS","readme":"# Fitur Framecss Framework adalah \nFitur 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\n\n[![Socket Badge](https://socket.dev/api/badge/npm/package/getframecss)](https://socket.dev/npm/package/getframecss)\n#### Framecss Framework Open Source \n\u003cp align=\"\"\u003eFramecss adalah Framework CSS open source yang Menyediakan berbagai macam library CSS untuk keperluan Desain Aplikasi Web \u003ci\u003eResponsible\u003c/i\u003e 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\u003c/p\u003e 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. \n⭐ framecss css framework, let's go build your design with framecss Framework\n\n## Versi :\n[frame.1.1.5.css](https://framecss-framework-nelsen.on.drv.tw/V1.1.5.html) [Demo Template](https://framecss-framework-nelsen.on.drv.tw/template.1.1.5.html)\n## Framecss..?\n[Dokumentasi](https://framecss-framework-nelsen.on.drv.tw/nelndocs.html) | [Lihat kode CSS](https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.1.1.5.css) | [Lihat Kode JS](https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.min.js) |\n## Status\n###### Framecss 1.1.4\n| Nama | Deskripsi |\n| --- | --- |\n| Update | 15-03-2023 |\n| Versi | 1.1.4 |\n| Lisensi | MIT |\n###### Framecss 1.1.5\n| Nama | Deskripsi |\n| --- | --- |\n| Update | 5-02-2024 |\n| Versi | 1.1.5 |\n| Lisensi | MIT |\n\n## Mulai\n### CDN\nFramecss.CSS\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.1.1.5.css\"\u003e\n```\nFramecss.JS\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.js\" defer=\"true\"\u003e\u003c/script\u003e\n```\nSlider.JS\n``` html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/slider.js\" defer=\"true\"\u003e\u003c/script\u003e\n```\n### jQuery.js, D3.js, Chart.js, Typed.js\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/jq.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/d3.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/chart.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/typed.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/plot.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n### Another js\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/ftema.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/cp.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n### NPM\nframecss.1.1.4\n```txt\nnpm i getframecss\n```\n### Github\n```txt\ngit clone https://github.com/nelsenpro/framecss.git\n```\n### Zip File\n[Download Zip](https://github.com/nelsenpro/framecss/archive/refs/heads/main.zip)\n\n\n### see other source on :\n[Gitlab](https://gitlab.com/nelsenpro/frame) | | [NPM](https://www.npmjs.com/package/getframecss) | | \n[Sourceforge](https://sourceforge.net/u/bnelsofc/framecss) | |\n[Launchpad](https://code.launchpad.net/~nelsenpro/framecss/+git/frame)\n\n## Starter Template\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.1.1.5.css\"\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/frame.min.js\" defer=\"true\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/framecss/data/slider.js\" defer=\"true\"\u003e\u003c/script\u003e\n    \u003ctitle\u003eMulai Framecss\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1 class=\"red\"\u003eWelcome\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n## Breakpoints :: Media Queries\n### Mobile Phones : class=\"col\"\nDibawah 599px = class=\"col-\"\n```css\n[class*=\"col-\"] {\n    width: 100%;\n}\n```\n### Tablets : class=\"col-s-1\"\ndari 600-767px = class=\"col-s-1\"\n```css\n@media only screen and (min-width: 600px) {\n    /* For tablets: */\n    .col-s-1 {\n        width: var(--col1);\n    }\n    .col-s-2 {\n        width: var(--col2);\n    }\n    .col-s-3 {\n        width: var(--col3);\n    }\n    .col-s-4 {\n        width: var(--col4);\n    }\n    .col-s-5 {\n        width: var(--col5);\n    }\n    .col-s-6 {\n        width: var(--col6);\n    }\n    .col-s-7 {\n        width: var(--col7);\n    }\n    .col-s-8 {\n        width: var(--col8);\n    }\n    .col-s-9 {\n        width: var(--col9);\n    }\n    .col-s-10 {\n        width: var(--col10);\n    }\n    .col-s-11 {\n        width: var(--col11);\n    }\n    .col-s-12 {\n        width: var(--full);\n    }\n}\n```\n### Desktop : class=\"col-1\"\ndiatas 767px : class=\"col-1\"\n```css\n@media only screen and (min-width: 768px) {\n    /* For desktop: */\n    .col-1 {\n        width: var(--col1);\n    }\n    .col-2 {\n        width: var(--col2);\n    }\n    .col-3 {\n        width: var(--col3);\n    }\n    .col-4 {\n        width: var(--col4);\n    }\n    .col-5 {\n        width: var(--col5);\n    }\n    .col-6 {\n        width: var(--col6);\n    }\n    .col-7 {\n        width: var(--col7);\n    }\n    .col-8 {\n        width: var(--col8);\n    }\n    .col-9 {\n        width: var(--col9);\n    }\n    .col-10 {\n        width: var(--col10);\n    }\n    .col-11 {\n        width: var(--col11);\n    }\n    .col-12 {\n        width: var(--full);\n    }\n}\n```\n## Kamu dapat Mengubah kode \n###### Kode \n```css\n:root {}\n```\n#### Contoh Mengubah Warna:\n###### Warna bawaan Framecss \n```css\n--red: #e51400;\n--green: #60a917;\n--blue: #3e65ff;\n```\n###### Warna sesuai keinginan\n```css\n--red: #FF0000;\n--green: #008000;\n--blue: #0000FF;\n```\n###### Begini caranya\n```css\n    /* mengubah variabel warna sesuai keinginan */\n:root {\n        --red: #FF0000;\n        --green: #008000;\n        --blue: #0000FF;\n    }\n    /* nama class untuk warna font/teks */\n    .red,\n    .merah {\n        color: var(--red);\n    }\n    .green,\n    .hijau {\n        color: var(--green);\n    }\n    .blue,\n    .biru {\n        color: var(--blue);\n    }\n```\n###### HTML nya\n```html\n\u003ch3 class=\"merah\"\u003eteks ini merah\u003c/h3\u003e\n\u003cp class=\"green\"\u003eteks ini hijau\u003c/p\u003e\n\u003ch5 class=\"biru\"\u003eteks ini biru\u003c/h5\u003e\n```\n\n## Creator \n[Blog](https://goframe-css.blogspot.com/) | [Tiktok](https://www.tiktok.com/@framecss_framework_css) | [Youtube](https://youtube.com/@bnelsofficial4505?si=Wjr0I8h-N2j1wjIM) | [Nelsen Niko](https://wa.me/6285328736706)\n## Thanks for :\n[Normalize.css]() | [Animate.css]() | [Fontsawesome]() | [StaticSave]() | [W3schools]() | [Swiffy Slider]() | [jQuery.js]() | [D3.js]() | [Chart.js]() | [Plotly.js]() | [Google]()\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnelsenpro%2Fframecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnelsenpro%2Fframecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnelsenpro%2Fframecss/lists"}