PHPackages droptica/droopler-project - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. droptica/droopler-project ActiveProject[Utility & Helpers](/categories/utility) droptica/droopler-project ========================= Project template for Droopler with Composer 8.3.3.0(1y ago)5010.0k31GPL-2.0-or-laterSCSSCI failing Since Dec 22Pushed 1y ago19 watchersCompare [ Source](https://github.com/droptica/droopler_project)[ Packagist](https://packagist.org/packages/droptica/droopler-project)[ Docs](https://www.droopler.com)[ RSS](/packages/droptica-droopler-project/feed)WikiDiscussions 3.x Synced 1mo ago READMEChangelog (10)Dependencies (9)Versions (71)Used By (0) Droopler template for new project ================================= [](#droopler-template-for-new-project) [![Droopler Logo](https://camo.githubusercontent.com/efc62eda6dbaf240a5ed577b32090f8c022d811fce92e83f48ee3032b15cf367/68747470733a2f2f64726f6f706c65722d64656d6f2e64726f70746963612e636f6d2f7468656d65732f637573746f6d2f64726f6f706c65725f7375627468656d652f6c6f676f2e737667)](https://camo.githubusercontent.com/efc62eda6dbaf240a5ed577b32090f8c022d811fce92e83f48ee3032b15cf367/68747470733a2f2f64726f6f706c65722d64656d6f2e64726f70746963612e636f6d2f7468656d65732f637573746f6d2f64726f6f706c65725f7375627468656d652f6c6f676f2e737667) About this repository --------------------- [](#about-this-repository) This repository is for Droopler 3.x. For Droopler 5.x, there's only one repository (without \_project), and the newest version is here: What is Droopler? ----------------- [](#what-is-droopler) Droopler is a Drupal 10 profile designed to kickstart a new webpage in a few minutes. It's based on the latest frontend technologies, including Bootstrap 4. The maintainer of Droopler is [Droptica](https://droptica.com). - **Official website**: [droptica.com/droopler](https://www.droptica.com/droopler) - **Tutorials**: [droptica.com/droopler/tutorials](https://www.droptica.com/droopler/tutorials/) - **Demo**: [droopler-demo.droptica.com](https://droopler-demo.droptica.com) - **Profile repository**: [github.com/droptica/droopler](https://github.com/droptica/droopler) - **Drupal.org project**: [drupal.org/project/droopler](https://www.drupal.org/project/droopler) - **Issue queue**: [drupal.org/project/issues/droopler](https://www.drupal.org/project/issues/droopler) For the latest news please subscribe to our [Facebook](https://www.facebook.com/Droopler/) and [Twitter](https://twitter.com/DrooplerCMS). What is this Droopler template? ------------------------------- [](#what-is-this-droopler-template) It's a skeleton, a boilerplate for new projects based on Droopler. If you wish to use Droopler - fork (or download) this repository. It contains a minimum set of code to start your new website. Threat it the same as [drupal/recommended-project](https://github.com/drupal/recommended-project) or [drupal-composer/drupal-project](https://github.com/drupal-composer/drupal-project). This code includes: - **composer.json** with all dependencies required to run Droopler. - **.gitignore** adjusted to use GIT with Drupal. - Boilerplate subtheme with minimal required CSS/SCSS and Javascript. It contains gulpfile.js to speed up development of Drupal's frontend. How to build the website? ------------------------- [](#how-to-build-the-website) **1) Run Composer** ``` $ composer create-project droptica/droopler-project "^8.3.1" $ cd droopler $ composer install ``` **2) Run npm** Droopler is using Gulp stack to speed up development of new sites. It compiles SCSS to CSS, enables Autoprefixer to deal with browser compatibility and minimizes all JavaScript files. [Install Node v13 and npm](https://nodejs.org/en/download/) on your computer and in the root directory of your project run the following commands: ``` $ npm install --global gulp-cli $ cd web/profiles/contrib/droopler/themes/custom/droopler_theme $ npm install $ gulp compile $ cd - $ cd web/themes/custom/droopler_subtheme $ npm install $ gulp compile ``` **3) Run Drupal installation** Go to and follow the steps of configuration. ### Using DDEV [](#using-ddev) 1. [Install ddev](https://ddev.readthedocs.io/en/stable/#installation). 2. Run `ddev config` to configure the project. 3. Run `ddev start` to start the project. 4. Run `ddev composer install` to download the project dependencies. 5. If you notice problems with accessing to the repository, run `ddev auth ssh` to add the keys from your `~/.ssh` directory to the web container and run `ddev composer install` command once again. 6. Run `ddev theme` to install the theme dependencies and compile assets. By default, production assets are compiled. You can run `ddev theme dev` to compile assets for development. You can also run `ddev theme watch` to watch for changes in SCSS and JS and process them on the fly. 7. Go to the URL provided by ddev and finish installing the website. You can also run `ddev build-profile` to build the Droopler profile from the CLI (you will get a fully featured version, with blog, products and demo content). How to work with the subtheme? ------------------------------ [](#how-to-work-with-the-subtheme) First run **gulp watch** in your subtheme's directory (remember to compile `droopler_theme` first). It will track all the changes in theme source files and compile assets in the fly. ``` $ cd web/themes/custom/droopler_subtheme $ gulp watch ``` There are also other Gulp commands for theme developers, here's the full reference: - **gulp watch** - watches for changes in SCSS and JS and proceses them on the fly - **gulp compile** - cleans derivative files and compiles all SCSS/JS in the subtheme for DEV environment - **gulp dist** - cleans derivative files and compiles all SCSS/JS in the subtheme for PROD environment - **gulp clean** - cleans derivative files - **gulp debug** - prints Gulp debug information, this comes in handy when something's not working ### Using DDEV [](#using-ddev-1) There are several comands that help you to work with the subtheme. You can run them from the root directory of your project. - `ddev theme watch` - watches for changes in SCSS and JS and processes them on the fly - `ddev theme dev` - cleans derivative files and compiles all SCSS/JS in the subtheme for DEV environment - `ddev theme production` - cleans derivative files and compiles all SCSS/JS in the subtheme for PROD environment SCSS structure -------------- [](#scss-structure) - **style.scss** - combines all SCSS code from base theme and subtheme - **print.scss** - combines all SCSS code for printing from base theme and subtheme - **config/** - the most important directory that contains the subtheme configuration - you can add your own config files like \_foobar.scss, just refer to them in \_all.scss. - **libraries/** - additional files needed by Drupal You can use any SCSS structure you like. We recommend dividing files into **layout/** and **components/** directories. Just remember to include your files in **style.scss**. SCSS Configuration ------------------ [](#scss-configuration) Droopler is designed to make your work easier. You don't have to override SCSS or CSS code to make your own adjustments. In most cases it is enough to modify the configuration. Just look into variable definitions in the subtheme's **scss/config/\_base\_theme\_overrides.scss** file. ``` // Colours - The Greeks // ------------------------- // $color-odysseus: white; // Paragraph d_p_banner // ------------------------- // $d-p-banner-header-color: $color-odysseus; // $d-p-banner-subheader-color: $color-odysseus; ``` To alter this - uncomment the line and change the value. A you can see - there are many levels of variables, see the comments in \_base\_theme\_overrides.scss to get some more information. When you save this config file, **gulp watch** will recompile all SCSS with your own config. Updating Droopler ----------------- [](#updating-droopler) See the [UPDATE.md](https://github.com/droptica/droopler/blob/master/UPDATE.md) file from the Droopler profile. ### Switching from 8.3.x.x to 3.x.x tags [](#switching-from-83xx-to-3xx-tags) When using this Droopler 3.x repository, you should now rely on tags in the 3.x.x format (for example, 3.3.x) instead of the old 8.3.x.x tags. More details on how to switch can be found here: How to install Google Fonts? ---------------------------- [](#how-to-install-google-fonts) By default Droopler uses free [Lato](http://www.latofonts.com/) webfont. If you wish to install your own fonts from Google - put their definitions into **droopler\_subtheme.libraries.yml** like this: ``` global-styling: version: VERSION css: theme: '//fonts.googleapis.com/css?family=Rajdhani:500,600,700|Roboto:400,700&subset=latin-ext': { type: external, minified: true } css/style.css: {} ``` How to install icon fonts? -------------------------- [](#how-to-install-icon-fonts) If you wish to install FontAwesome or Glyphicons from the CDN - just grab their URLs and follow the steps described in previous chapter about Google Fonts. You'll find a FontAwesome example in **droopler\_subtheme.libraries.yml** and **droopler\_subtheme.info.yml**. ### Health Score 49 — FairBetter than 95% of packages Maintenance43 Moderate activity, may be stable Popularity36 Limited adoption so far Community27 Small or concentrated contributor base Maturity78 Established project with proven stability Bus Factor1 Top contributor holds 77.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~60 days Recently: every ~44 days Total 45 Last Release 424d ago Major Versions 4.0.0-alpha1 → 8.3.3.0-rc22024-02-19 4.0.0-alpha2 → 8.3.3.0-rc32024-02-29 3.3.0 → 8.3.3.02025-01-17 ### Community Maintainers ![](https://www.gravatar.com/avatar/675aee3c25d9199cdbff3dd4624b2696ddbef744f668923927caf647bbee55ac?d=identicon)[droptica](/maintainers/droptica) --- Top Contributors [![grzegorz-pietrzak-droptica](https://avatars.githubusercontent.com/u/29853946?v=4)](https://github.com/grzegorz-pietrzak-droptica "grzegorz-pietrzak-droptica (191 commits)")[![pawel-gorski-droptica](https://avatars.githubusercontent.com/u/13447277?v=4)](https://github.com/pawel-gorski-droptica "pawel-gorski-droptica (11 commits)")[![rafal-sereda-droptica](https://avatars.githubusercontent.com/u/37533838?v=4)](https://github.com/rafal-sereda-droptica "rafal-sereda-droptica (8 commits)")[![amanda-sciebura-droptica](https://avatars.githubusercontent.com/u/58425484?v=4)](https://github.com/amanda-sciebura-droptica "amanda-sciebura-droptica (6 commits)")[![jsamulski](https://avatars.githubusercontent.com/u/10612362?v=4)](https://github.com/jsamulski "jsamulski (4 commits)")[![damian-sikora-droptica](https://avatars.githubusercontent.com/u/16644188?v=4)](https://github.com/damian-sikora-droptica "damian-sikora-droptica (4 commits)")[![kamil-ziora-droptica](https://avatars.githubusercontent.com/u/129868153?v=4)](https://github.com/kamil-ziora-droptica "kamil-ziora-droptica (4 commits)")[![grzegorz-bartman-droptica](https://avatars.githubusercontent.com/u/232051989?v=4)](https://github.com/grzegorz-bartman-droptica "grzegorz-bartman-droptica (3 commits)")[![jakub-wozniak-droptica](https://avatars.githubusercontent.com/u/46443366?v=4)](https://github.com/jakub-wozniak-droptica "jakub-wozniak-droptica (3 commits)")[![aliegmann-droptica](https://avatars.githubusercontent.com/u/10612347?v=4)](https://github.com/aliegmann-droptica "aliegmann-droptica (2 commits)")[![gorsky87](https://avatars.githubusercontent.com/u/21284516?v=4)](https://github.com/gorsky87 "gorsky87 (2 commits)")[![jarobartman](https://avatars.githubusercontent.com/u/92709488?v=4)](https://github.com/jarobartman "jarobartman (2 commits)")[![pawel-szymanski-droptica](https://avatars.githubusercontent.com/u/33319532?v=4)](https://github.com/pawel-szymanski-droptica "pawel-szymanski-droptica (2 commits)")[![kwiktorowicz-droptica](https://avatars.githubusercontent.com/u/100690737?v=4)](https://github.com/kwiktorowicz-droptica "kwiktorowicz-droptica (1 commits)")[![volodymyr-umanets-droptica](https://avatars.githubusercontent.com/u/37289979?v=4)](https://github.com/volodymyr-umanets-droptica "volodymyr-umanets-droptica (1 commits)")[![pfrenssen](https://avatars.githubusercontent.com/u/442924?v=4)](https://github.com/pfrenssen "pfrenssen (1 commits)")[![canvaskent](https://avatars.githubusercontent.com/u/5773310?v=4)](https://github.com/canvaskent "canvaskent (1 commits)")[![mariusz-andrzejewski-droptica](https://avatars.githubusercontent.com/u/42933966?v=4)](https://github.com/mariusz-andrzejewski-droptica "mariusz-andrzejewski-droptica (1 commits)") ### Embed Badge ![Health badge](/badges/droptica-droopler-project/health.svg) ``` [![Health](https://phpackages.com/badges/droptica-droopler-project/health.svg)](https://phpackages.com/packages/droptica-droopler-project) ``` ### Alternatives [fourkitchens/sous-drupal-project Starter project for Sous a Drupal distribution featuring a theme based on Emulsify Design System. 151.0k](/packages/fourkitchens-sous-drupal-project)[oomphinc/drupal-scaffold A Drupal scaffold project 192.6k](/packages/oomphinc-drupal-scaffold)[wingsuit-designsystem/wingsuit-kickstarter Starterkit for Wingsuit and Layout Builder. 131.2k](/packages/wingsuit-designsystem-wingsuit-kickstarter) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)