{"id":16551247,"url":"https://github.com/michaelcurrin/css-frameworks-demo","last_synced_at":"2026-04-09T07:57:12.958Z","repository":{"id":93178023,"uuid":"231960701","full_name":"MichaelCurrin/css-frameworks-demo","owner":"MichaelCurrin","description":"Demo of CSS components from Bootstrap and Bulma frameworks.","archived":false,"fork":false,"pushed_at":"2021-12-03T08:22:37.000Z","size":71,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-14T20:52:55.400Z","etag":null,"topics":["bootstrap","bulma","css","css-frameworks","demo","github-pages","jekyll"],"latest_commit_sha":null,"homepage":"https://michaelcurrin.github.io/css-frameworks-demo/","language":"HTML","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/MichaelCurrin.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":"2020-01-05T18:44:57.000Z","updated_at":"2024-08-17T15:10:19.000Z","dependencies_parsed_at":"2023-03-03T10:45:19.032Z","dependency_job_id":null,"html_url":"https://github.com/MichaelCurrin/css-frameworks-demo","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"MichaelCurrin/themeless-jekyll-quickstart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fcss-frameworks-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fcss-frameworks-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fcss-frameworks-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fcss-frameworks-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaelCurrin","download_url":"https://codeload.github.com/MichaelCurrin/css-frameworks-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241876002,"owners_count":20035368,"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":["bootstrap","bulma","css","css-frameworks","demo","github-pages","jekyll"],"created_at":"2024-10-11T19:36:44.114Z","updated_at":"2025-12-31T01:01:58.090Z","avatar_url":"https://github.com/MichaelCurrin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Frameworks Jekyll Demo\n\u003e Demo of CSS components from Bootstrap and Bulma frameworks in a Jekyll site\n\n[![Made with Jekyll](https://img.shields.io/badge/jekyll-3.9-blue?logo=jekyll\u0026logoColor=white)](https://jekyllrb.com)\n[![Llicense](https://img.shields.io/badge/License-MIT-blue)](#license)\n\nUsing a CSS framework gives you some benefits:\n\n- Focus on your content logic rather than building and tweaking CSS from scratch.\n- Write less code - use existing components and styling.\n- Customize components using classes which use existing CSS.\n- Get a mobile responsiveness experience easily.\n\nThis project's doc site is built in Jekyll for presentation, but if you don't use Jekyll that's fine as you can just focus on the content you see in the tutorial and demos.\n\nIf you are just here to see how to add Bootstrap or Bulma styles to your HTML, see the [\\_includes](/_includes/) directory. That includes some content which gets loaded into the `head` HTML tag.\n\n**Table of contents:**\n\n- [Resources](#resources)\n- [Set up on Github Pages](#setup-on-github-pages)\n- [Installation](#installation)\n    - [Clone](#clone)\n    - [System dependencies](#system-dependencies)\n    - [Project dependencies](#project-dependencies)\n- [Run](#run)\n- [License](#license)\n\n\n## Resources\n\n### Bootstrap\n\nBootstrap is a commonly used CSS framework.\n\n- [Official homepage](https://getbootstrap.com)\n    - [Get Started](https://getbootstrap.com/docs/4.4/getting-started/introduction/)\n- Tutorials\n    - [Bootstrap Get Started](https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp) on W3 Schools.\n\n### Bulma\n\nBulma is also popular but is said to be lighter to load and simpler to use that Bulma.\n\nFeatures - from [article](https://dev.to/sm0ke/bulma-css-a-tutorial-for-beginners-af2):\n\n\u003e - Flexbox based: Makes creating grid items and vertically aligned things really easy\n\u003e - Modular: Built with Sass. Only import the features that you'll use for your project. Bulma consists of 39 .sass files that you can import individually.\n\u003e - Small footprint and no Javascript dependency. Bulma comes in a single compiled CSS usable via nom install, CDN or local usage.\n\u003e - Mobile first framework.\n\n\n- [Official homepage](https://bulma.io)\n    - [Get Started](https://bulma.io/documentation/overview/start/)\n    - [Documentation](https://bulma.io/documentation/)\n- Tutorials\n    - [Tutorial](https://www.tutorialspoint.com/bulma/index.htm) on [TutorialsPoint.com](https://www.tutorialspoint.com).\n    - [Learn Bulma in 5 minutes](https://www.freecodecamp.org/news/learn-bulma-in-5-minutes-ec5188c53e83/)\n    - [Bulma CSS - A tutorial for beginners](https://dev.to/sm0ke/bulma-css-a-tutorial-for-beginners-af2)\n- CDN\n    - CDN JS\n        - [cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)\n        - Example: [cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css)\n\nExample of a simple Bulma page:\n\n- `index.html`\n    ```html\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003ctitle\u003eHello Bulma!\u003c/title\u003e\n\n        \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css\"\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003csection class=\"section\"\u003e\n            \u003cdiv class=\"container\"\u003e\n                \u003ch1 class=\"title\"\u003e\n                    Hello\n                \u003c/h1\u003e\n                \u003cp class=\"subtitle\"\u003e\n                    Subtitle\n                \u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/section\u003e\n    \u003c/body\u003e\n\n    \u003c/html\u003e\n    ```\n\n\n## Set up remotely\n\n### Github Pages\n\nFork this proejct.\n\nGo to the Settings of the repo.\n\nEnable _Github Pages_.\n\nFind your URL and open it in the browser.\n\n\n## Installation\n\nSetup this project locally - instructions are for _Linux_ or _macOS_ systems.\n\n### Clone\n\nOptionally this to your own repo - either fork this repo or click _Use this Template_.\n\nThen clone your repo or this one.\n\nNavigate to the repo root directory locally.\n\nYou can view commands in the [Makefile](/Makefile) or continue.\n\n```bash\n$ make help\n```\n\n### System dependencies\n\nInstall [Jekyll](https://jekyllrb.com/) and [Bundler](https://bundler.io/) globally.\n\n```bash\n$ gem install jekyll bundler --user-install\n```\n\n### Project dependencies.\n\nInstall gems. If run repeatedly, this command will **not** upgrade gems.\n\n```bash\n$ make install\n```\n\nRun this command in future to upgrade to the latest gems.\n\n```bash\n$ make upgrade\n```\n\n\n## Run\n\n```bash\n$ make serve\n```\n\nOpen the browser at:\n\n- http://localhost:4000/\n\n\n## License\n\nLicensed under [MIT](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fcss-frameworks-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelcurrin%2Fcss-frameworks-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fcss-frameworks-demo/lists"}