{"id":14988687,"url":"https://github.com/app-generator/bulma-css","last_synced_at":"2025-04-12T00:22:05.726Z","repository":{"id":56775004,"uuid":"327535758","full_name":"app-generator/bulma-css","owner":"app-generator","description":"Bulma CSS - Open-source components | AppSeed","archived":false,"fork":false,"pushed_at":"2021-01-30T06:34:27.000Z","size":3119,"stargazers_count":30,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T20:06:46.694Z","etag":null,"topics":["appseed","bulma-css","open-source"],"latest_commit_sha":null,"homepage":"https://bulma-css.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-07T07:26:43.000Z","updated_at":"2025-01-04T02:25:32.000Z","dependencies_parsed_at":"2022-08-16T02:31:20.056Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/bulma-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fbulma-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fbulma-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fbulma-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fbulma-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/bulma-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248498121,"owners_count":21114043,"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":["appseed","bulma-css","open-source"],"created_at":"2024-09-24T14:17:04.209Z","updated_at":"2025-04-12T00:22:05.700Z","avatar_url":"https://github.com/app-generator.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# [Bulma CSS](https://bulma-css.com/)\n\n\u003e Open-source project - provided by [AppSeed](https://appseed.us) under [EULA](./LICENSE.md) license.\n\n- [Bulma CSS Components](https://components.bulma-css.com/) - LIVE Demo\n\n\u003cbr /\u003e\n\n**Initially coded by [Charlie Rabiller](https://www.linkedin.com/in/crabiller/)** - the creator of [Tailwind-kit](https://www.tailwind-kit.com/). \n\n\u003cbr /\u003e\n  \n\n![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues](https://img.shields.io/github/issues/app-generator/bulma-css) \u003ca  href=\"https://components.bulma-css.com/\"  target=\"_blank\"\u003e\n\n![Bulma-css](public/home.png)\n\n\u003c/a\u003e\n\n### A beautiful and large components kit for Bulma\n  \n\nBulma CSS is Free and Open Source. It does not change or add any CSS to the already one from Bulma Framework. It features multiple HTML elements that can be used in all web projects who's use Bulma CSS.\n  \n\n## CSS Components\n  \n\nBulma Css comes with 18+ Fully Coded CSS elements and layouts.\n\n \n\n## Live code editor\n\n![Bulma-css](public/live.png)\n\n\nBulma-css include a live code editor to change the components code and see in live the modification.\n\n  \n\n## Dark mode\n\n![Bulma-css](public/demo.gif)\n\n \n\nMost components are implemented with a light and dark version.\n  \n\n## Documentation\n\nFor documentation please access [Bulma Components](https://components.bulma-css.com/started).\n\n\n## Browser Support\n  \n\nAt present, we officially aim to support the last two versions of the following browsers:\n\n  \n\n| Chrome | Firefox | Edge | Safari | Opera |\n\n\n\n \u003cimg  src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/chrome-logo.png\"  width=\"64\"  height=\"64\"\u003e \u003cimg  src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png\"  width=\"64\"  height=\"64\"\u003e  \u003cimg  src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png\"  width=\"64\"  height=\"64\"\u003e  \u003cimg  src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png\"  width=\"64\"  height=\"64\"\u003e  \u003cimg  src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png\"  width=\"64\"  height=\"64\"\u003e \n\n   \n \n\n## Getting Started\n\n  \n\n![Bulma-css](https://res.cloudinary.com/practicaldev/image/fetch/s--2hp-fJGr--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/bgi7uowdg8f0jzms1f1b.png)\n\n  \n  \n\nBulma-css is a static site build with [Next.js](https://nextjs.org/) and typescript.\n\n### Prerequisites: \n\nNode.js 10.13 or later \n\nRecommanded : **Node v12.18.3** \n\n### Run the project: \n\nInstall dependencies:\n\n  \n\n```bash\n\nnpm install\n\n# or\n\nyarn install\n\n```\n\n  \n\nRun the development server:\n\n  \n\n```bash\n\nnpm run dev\n\n# or\n\nyarn dev\n\n```\n\n  \n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n  \n\nYou can start editing the page by modifying `pages/_index.tsx`. The page auto-updates as you edit the file (static folder : /out).\n\n  \n  \n\nBuild the static site:\n\n  \n\n```bash\n\nnpm run build\n\n# or\n\nyarn build\n\n```\n\n\n## 🧐 What's inside?\n\nA quick look at the important repo files and directories you'll see in a the project.\n\n    .\n    ├── node_modules\n    ├── public\n    ├── pages\n    ├── components\n    \t ├── kit\n         ├── layout\n         ├── site\n    ├── utils\n    ├── editorTheme.tsx\n    ├── global.scss\n    ├── LICENSE\n    ├── next.config.json\n    ├── package.json\n    ├── README\n    ├── tsconfig.json\n    ├── .gitignore\n    └── yarn.lock.json\n\n1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.\n\n1.  **`/public`**: This directory contain all the public assets that need the project (images, icons).\n\n1.  **`/pages`**: This directory contain all pages of the app. See [NextJs pages documentation](https://nextjs.org/docs/basic-features/pages/) for more details\n\n1.  **`/components`**: This directory contain all components of the app. \n\t1. **kit** : contains all components used for demonstration/preview. Components are sorted by section (Commerce, Elements, Forms ...). Each section have his directory. \n\t1. **layout** : contains all layout used in the application. See [NextJs layout documentation](https://nextjs.org/learn/basics/assets-metadata-css/layout-component) for more details\n\t1. **site** : contains all component used for the structure of the application (header, footer, home, ...)\n\n1.  **`/utils`**: This directory contain all utils classes, like html parser, html beautifier (use to indent the components code on preview)\n\n1.  **`editorTheme.tsx`**: This file is the configuration theme (colors) for the components code preview. See [react-prism](https://github.com/FormidableLabs/prism-react-renderer#theming) for more details\n\n1.  **`global.scss`**: This scss file contain all the 'custom' css use for the app. This file is not used for bulma components and not override any bulma classes.  \n\n1.  **`LICENSE`**: Bulma-css is licensed under [EULA](./LICENSE.md).\n\n1.  **`next.config.json`**: This file contain all the nextJS configuration. Here we use the default one.\n\n1. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.\n\n1. **`README.md`**: A text file containing useful reference information about your project.\n\n1.  **`tsconfig.json`**: The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.\n\n1.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.\n\n1. **`yarn-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**\n\n## 📋 Create a new section \n\nComponents are sorted by category.\n\nCategories are sorted by section. \n\nA section can have one or more category.\n\nCategory can have one or more component.\n\nTo add a new main section like ***Commerce, Element, Form*** .. you must : \n1.  Create your new directory in **components/kit/components/{yourSectionName}**. It's inside this directory that you will put all your components files.\n\t  \n2.  Create a **index.tsx** file on this new directory. It will contain the description (categories names, components numbers, title, ....) of the section. See other section files for an example.   \n2.  Each time you want create a new category on a section you will need create a directory in the directory of this one. Then you will put the component file in the category directory. \n\nSee an example : \n\n\n    \n    ├── components\n    \t ├── kit\n         \t├── components\n            \t├── MyNewSection // section directory\n                \tindex.tsx // section description file\n                \t├── MyCategory // category directory\n                    \t\tMyComponent.tsx // My component source file\n                            MyComponent2.tsx // My component source file\n                            ....\n                \n         ├── layout\n         ├── site\n    ├── ...\n    └── ...\n\n\n\n##  📁 Create a new category\n\nAs seen just above, to create a new category you need to create a directory on a section that will contains your components. We also need to create the category page.\n1.  Create your new directory in **pages/components/{yourCategoryName}**. It's inside this directory that we will put the category page code.\n\t  \n2.  Create a **index.tsx** file on this new directory. It will contain all the components that we want import and see in this category. See other category files for an example.   \n2.  When index.tsx is created NextJs create a route for this category that we can see on : http://localhost:3000/components/{yourCategoryName}\n\n\n## ➕ Create a new component\n\nComponents are classics React functional component.\n\n\n### dark/light mode\n\nIf you want that your component have a dark version, you need to declare a props `isDark` which is a boolean, not mandatory.\nThen you need to declare the classes used for each version (light/dark) and use it on the code in function of the `isDark` props. Ex : \n\n```JSX\nimport React from \"react\";\n\ninterface Props {\n  label: string;\n  isDark?: boolean;\n  isLoading?: boolean;\n}\nconst theme = {\n  dark: {\n    background: \"is-dark\",\n  },\n  light: {\n    background: \"is-primary\",\n  },\n};\nconst Button = ({ label, isDark, isLoading }: Props) =\u003e {\n  const mode = isDark ? \"dark\" : \"light\";\n  return (\n    \u003cbutton\n      className={`button ${theme[mode].background} ${\n        isLoading ? \"is-loading\" : \"\"\n      }`}\n    \u003e\n      {label}\n    \u003c/button\u003e\n  );\n};\nexport default Button;\n```\n\n\n### Import the component\n\nThe last thing to do is to import your component on the wanted category file : **(/pages/components/{category}/index.tsx)**\n\nTo enabled all feature preview like live edition, dark mode, ... you need to pass our component to `ComponentLayout`.\n\n `ComponentLayout` is the layout who will add all buttons (Code, Copy, Dark mode) and the live edition feature on our component.\n \n**`ComponentLayout`** take few props :  \n\n- `element`: The JSX.Element of our component\n- `component`: The component \n- `title`: The title of the component display on the panel\n- `jsLink`: The link of the component codeon github (if need JS to work)\n- `vertical`: Boolean if the code preview is display on side of the component or below\n- `hasDarkMode`: Boolean if the component have dark/light implementation (Display or hide the dark mode checkbox)\n- `containerClasses`: Classes to add on the container of the component (ex : add margin, padding ...)\n-  containerWidth?: The container width (6 = 50%, 12=100%)\n\n| propName    | propType      | defaultValue | isRequired |\n| ----------- | ------------- | ------------ | ---------- |\n| element | JSX.Element        |              | x          |\n| component       |         |              | x          |\n| title | string       |          | x          |\n| jsLink    | string|              |          |\n| vertical    | boolean|        false      |          |\n| hasDarkMode    | boolean|        false      |          |\n| containerClasses    | string|              |          |\n| containerWidth    | number (1 to 12)|      12        |          |\n\n\nExample of the `index.tsx` file of the **team** category :\n\n```JSX\nimport React, { FC } from \"react\";\nimport AppLayout from \"../../../components/layout/AppLayout\";\nimport SectionHeader from \"../../../components/site/header/SectionHeader\";\nimport ComponentLayout from \"../../../components/layout/ComponentLayout\";\nimport SimpleTeam from \"../../../components/kit/components/pagesection/team/SimpleTeam\";\n\nconst TeamPage: FC = () =\u003e {\n  return (\n    \u003cAppLayout\n      title=\"Teams section free Bulma components\"\n      desc=\"Teams and more components for Bulma css\"\n    \u003e\n      \u003cSectionHeader title=\"Team\" /\u003e\n      \u003cComponentLayout\n        title=\"Simple\"\n        hasDarkMode={true}\n        containerWidth={3}\n        element={\u003cSimpleTeam /\u003e}\n        component={SimpleTeam}\n      /\u003e\n    \u003c/AppLayout\u003e\n  );\n};\n\nexport default TeamPage;\n\n```\n\n\nThis render on http://localhost:3000/components/team\n\n\n![Bulma-css](public/categoryFront.png)\n\n\n\n\n## Learn More\n\n  \n\nTo learn more about Next.js, take a look at the following resources:\n\n  \n\n-  [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n\n-  [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\n  \n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n  \n  \n\n## Licensing\n\n- Licensed under [EULA](./LICENSE.md).\n\n---\nBulma CSS Components - Open-Source project provided by [AppSeed](https://appseed.us).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fbulma-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fbulma-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fbulma-css/lists"}