{"id":28053393,"url":"https://github.com/livecanvas-team/picostrap5","last_synced_at":"2025-07-25T17:15:16.036Z","repository":{"id":292045760,"uuid":"979617790","full_name":"livecanvas-team/picostrap5","owner":"livecanvas-team","description":"Picostrap is the fastest Bootstrap 5 WordPress starter theme. Built-in SASS compiler, interfaced with the WordPress Customizer, for instant satisfaction.","archived":false,"fork":false,"pushed_at":"2025-06-26T12:01:59.000Z","size":2303,"stargazers_count":45,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-26T13:19:18.229Z","etag":null,"topics":["bootstrap","bootstrap5","php","sass","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://picostrap.com","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/livecanvas-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-05-07T19:51:00.000Z","updated_at":"2025-06-26T12:02:04.000Z","dependencies_parsed_at":"2025-05-07T22:19:40.543Z","dependency_job_id":"ceb4bb1e-5c5c-4487-96f4-90705b1f2824","html_url":"https://github.com/livecanvas-team/picostrap5","commit_stats":null,"previous_names":["livecanvas-team/picostrap5"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/livecanvas-team/picostrap5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livecanvas-team%2Fpicostrap5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livecanvas-team%2Fpicostrap5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livecanvas-team%2Fpicostrap5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livecanvas-team%2Fpicostrap5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livecanvas-team","download_url":"https://codeload.github.com/livecanvas-team/picostrap5/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livecanvas-team%2Fpicostrap5/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267038381,"owners_count":24025612,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","bootstrap5","php","sass","wordpress","wordpress-theme"],"created_at":"2025-05-12T03:35:02.858Z","updated_at":"2025-07-25T17:15:16.022Z","avatar_url":"https://github.com/livecanvas-team.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Picostrap 5 - Bootstrap 5 WordPress Starter Theme\n\n[![License: GPL v2 or later](https://img.shields.io/badge/License-GPL%20v2%20or%20later-blue.svg)](https://www.gnu.org/licenses/gpl-2.0.html)\n\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://picostrap.com/wp-content/uploads/2025/03/picostrap5-logo.svg\" alt=\"Picostrap 5 Logo\" width=\"300\"\u003e\n\u003c/p\u003e\n\n**The fastest Bootstrap 5 WordPress starter theme. Experience the power of SASS merged with the WordPress Customizer.**\n\nPicostrap 5 leverages the flexibility of Bootstrap 5 (currently v5.3+) and integrates it deeply with the WordPress Customizer. Customize Bootstrap's look and feel directly from your WordPress backend, and Picostrap will recompile the necessary CSS on the fly using a built-in SASS compiler that runs right in your browser.\n\n**[Watch the introduction video](https://youtu.be/nrHFh_08w78) to get started!**\n**[Visit the Picostrap website](https://picostrap.com)**\n\n## Key Features\n\n*   **Bootstrap 5.3+ Integration:** Built on the latest stable version of the world's most popular front-end framework.\n*   **Turbocharged by NinjaBootstrap** Bootstrap Configuration \u0026 Additional Utility Classes. This helps you make the most out of Bootstrap, enabling responsive variations of utility classes you DO need, eg position-lg-absolute - check out https://bootstrap.ninja/ninjabootstrap/ \n*   **Live SASS Compilation:** Modify Bootstrap SCSS variables (colors, fonts, spacing, components, etc.) directly through the WordPress Customizer. Picostrap uses **PicoSASS** (an implementation of Dart SASS running in the browser via JSPM) to recompile your CSS instantly upon hitting \"Publish\" or via a manual trigger in the admin bar.\n*   **Single CSS Bundle:** Generates a single, minified `css-output/bundle.css` file for optimal performance.\n*   **Extensive Customizer Options:**\n    *   Control Bootstrap SCSS variables.\n    *   **AI Palette Generator:** Generate color palettes using AI (powered by Huemint API).\n    *   **Live Style Guide Preview:** See your changes reflected in a comprehensive style guide directly within the Customizer preview.\n    *   **Font Picker:** Choose Google Fonts easily with a built-in font picker.\n    *   Layout options (Navbar position, expansion, etc.).\n    *   Toggle various theme features on/off.\n*   **Opt-in Features:** Keep your site lean by enabling only the features you need:\n    *   Disable Gutenberg Editor (and its CSS)\n    *   Disable Block-based Widgets Editor\n    *   Disable WordPress Comments\n    *   Disable XML-RPC\n    *   Add a \"Back to Top\" button\n    *   Enable GLightbox for image lightboxes\n    *   Enable Bootstrap Tooltips \u0026 Popovers\n    *   Enable Page Scroll Detection (adds body classes `scroll-position-at-top` / `scroll-position-not-at-top`)\n    *   Open Main Menu on Hover (for non-touch devices)\n*   **Performance Focused:** Includes head cleanup (`clean-head.php`) to remove unnecessary WordPress meta tags, emoji scripts, etc.\n*   **Dark Mode Switch:** Optional Bootstrap 5-compatible dark mode toggle.\n*   **WooCommerce Ready:** Includes basic support and template overrides for WooCommerce integration.\n*   **LiveCanvas \u0026 WindPress Friendly:** Designed to work well with the LiveCanvas page builder and WindPress Tailwind CSS integration plugins.\n*   **Developer Friendly:** Clean codebase, standard WordPress practices, starter theme philosophy. Uses a Bootstrap 5 Navwalker.\n*   **Translation Ready:** Includes language files (`.pot`, `.po`) for easy translation.\n\n## Getting Started\n\n1.  **Installation:** Install like any other WordPress theme. Download the `.zip` file, **RENAME** it to \"**picostrap5.zip**\" and upload it via the WordPress admin panel (`Appearance \u003e Themes \u003e Add New`) or upload the extracted folder via FTP to `/wp-content/themes/`.\n2.  **Child Theme (Recommended):** For customization beyond the Customizer, it's highly recommended to use a child theme. You can download a starter child theme from the [Picostrap website](https://picostrap.com/#downloads).\n3.  **Customize:** Navigate to `Appearance \u003e Customize` in your WordPress admin panel. Explore the various sections (Colors, Typography, Global Options, Buttons, Forms, Navbars, etc.) to tailor the theme to your needs.\n4.  **Compile SASS:**\n    *   **Via Customizer:** Make your changes and click \"Publish\". The SCSS will automatically recompile in your browser, and the new CSS bundle will be saved via AJAX.\n    *   **Via Admin Bar:** While viewing the frontend (as an administrator), click the \"SASS\" icon in the admin bar and choose \"Recompile Once\" or \"Recompile Continuously\".\n\n## How SASS Compilation Works\n\n1.  **Customizer Changes:** When you modify SCSS variables in the Customizer, the values are saved as theme mods.\n2.  **PicoSASS Trigger:** When you publish changes or use the admin bar trigger, the `picosass.js` script is loaded.\n3.  **SCSS Generation:** JavaScript reads the SCSS theme mods, constructs the SASS code (variables + `@import 'main';`), and passes it to the Dart SASS compiler running in the browser.\n4.  **Compilation:** PicoSASS fetches necessary Bootstrap SCSS files (from the theme folder, potentially falling back to the parent theme if using a child theme) and compiles the final CSS.\n5.  **Live Preview:** The compiled CSS is injected into the Customizer preview iframe (or the main page if using the admin bar trigger) via a `\u003cstyle id=\"picosass-injected-style\"\u003e` tag.\n6.  **Saving:** After compilation (and Customizer save, or manual trigger completion), the compiled CSS is sent via AJAX to a WordPress action (`picostrap_save_css_bundle`) which saves it to `/wp-content/themes/(your-theme)/css-output/bundle.css`. The theme mod `css_bundle_version_number` is incremented to ensure cache busting.\n\n*Note: SASS compilation requires administrator privileges and happens in the administrator's browser.*\n\n## Customization\n\n*   **WordPress Customizer:** The primary way to customize colors, typography, and theme options.\n*   **Child Theme SCSS:** For more advanced CSS or structural changes, create a child theme and edit the `sass/_custom.scss` file. Remember to recompile using the admin bar link after saving your changes.\n\n## Opt-in Features\n\nMany features can be toggled on or off under `Customize \u003e Global Utilities`. This allows you to load only the code you need. Features include:\n\n*   Disable Gutenberg Editor \u0026 CSS\n*   Disable Block-based Widgets Editor\n*   Disable WordPress Comments entirely\n*   Disable XML-RPC for security\n*   Add a \"Back to Top\" button\n*   Enable GLightbox JS library for image lightboxes\n*   Enable Bootstrap Tooltips \u0026 Popovers initialization script\n*   Enable Page Scroll Detection script\n*   Open Main Menu on Hover script\n\n## Compatibility\n\n*   **WooCommerce:** Theme support and basic template adjustments included.\n*   **LiveCanvas:** Tested and marked as friendly (`lc_theme_is_livecanvas_friendly`). Respects LC's header/footer handling options.\n*   **WindPress:** Includes specific support for integrating with the WindPress plugin for Tailwind CSS scanning (`inc/windpress-support.php`).\n\n## License\n\nPicostrap 5 is licensed under the [GPL v2 or later](https://www.gnu.org/licenses/gpl-2.0.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivecanvas-team%2Fpicostrap5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivecanvas-team%2Fpicostrap5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivecanvas-team%2Fpicostrap5/lists"}