PHPackages unocha/ocha\_basic - 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. unocha/ocha\_basic AbandonedArchivedDrupal-theme unocha/ocha\_basic ================== v2.7.0(6y ago)215[2 PRs](https://github.com/UN-OCHA/ocha_basic/pulls)GPL-2.0-onlyCSS Since Sep 4Pushed 5y ago1 watchersCompare [ Source](https://github.com/UN-OCHA/ocha_basic)[ Packagist](https://packagist.org/packages/unocha/ocha_basic)[ RSS](/packages/unocha-ocha-basic/feed)WikiDiscussions master Synced 3d ago READMEChangelog (10)Dependencies (1)Versions (14)Used By (0) DEPRECATED: OCHA Basic Drupal 7 starter theme. ============================================== [](#deprecated-ocha-basic-drupal-7-starter-theme) ### This is no longer up-to-date. We no longer implement Drupal 7 sites. [](#this-is-no-longer-up-to-date-we-no-longer-implement-drupal-7-sites) > \\ > > # Refer to [common\_design base theme](https://github.com/UN-OCHA/common_design) for Drupal 8, and for generic Common Design styles and markup. > > [](#refer-to-common_design-base-theme-for-drupal-8-and-for-generic-common-design-styles-and-markup) > > \\ A minimal starter theme for OCHA sites built with Drupal 7. The markup and styles can also be used for non-Drupal sites. ### See [OCHA basic demo](https://ochabasic.demo.ahconu.org) [](#see-ocha-basic-demo) For developers -------------- [](#for-developers) See [OCHA basic dev site](https://ochabasic.dev.ahconu.org) for documentation and examples. View via web inspector to see Drupal template suggestions. This will help understand where the markup is coming from (some comes from Drupal, some is custom). This is especially relevant for implementations not using Drupal as the markup might be copied instead of used directly from the repo. **Releases** Refer to [Github releases](https://github.com/UN-OCHA/ocha_basic/releases) for latest updates. We use [npm-version](https://docs.npmjs.com/cli/version) and [sematantic versioning](https://semver.org/) This theme contains ------------------- [](#this-theme-contains) - Common Header - Common Footer - Common SVG Icons - Variables for breakpoints, colours, font-sizes, fonts, measurements and z-index - Mixins for clearfix, REM font sizes and media queries - Bootstrap dropdowns (requires jQuery 1.9.1 or higher) **Optional components:** - Grid (simplified version of Bootstrap v4 grid, ) - Typography - Basic table styles - Basic form styles - gulp.js workflow for frontend development - Sass - Sourcemaps (see which specific Sass file contains styles during local development) - Autoprefixer - JS linting Integrations with other Drupal modules -------------------------------------- [](#integrations-with-other-drupal-modules) - [jquery\_update](https://www.drupal.org/project/jquery_update) — supports out Bootstrap library - [Modernizr](https://www.drupal.org/project/modernizr) — centralized D7 API for modular Modernizr builds - [PWA](https://www.drupal.org/project/pwa) — basic offline support and centralized API for manifest.json files Getting started --------------- [](#getting-started) 1. Copy this theme into your `sites/all/themes/custom` folder 2. If you want to renamne the theme, change the folder name, the filename of the .info file and find and replace for `ocha_basic` in the theme folder. 3. In the Drupal Admin, go to Appearance, find 'OCHA Basic Starter Theme' (or whatever you've renamed it to), and select **Enable and set default** **To contribute to `ocha_basic` development:** 1. Run `nvm use` for correct node version as per .nvmrc file 2. Install the dependencies: `npm install` 3. Copy `localConfig.example.json` to `localConfig.json` and specify the URL of your local Drupal environment. 4. Run the simple gulp task to build the CSS and watch for new changes: `gulp dev` 5. When you make commits, it will automatically run a "production" Sass build that excludes Sourcemaps CSS --- [](#css) This project uses [Sass](http://sass-lang.com/). To make changes edit the `.scss` files in the `sass/` folder, do NOT edit the files in `css/` directly. Run `gulp dev` in the theme folder to have gulp watch for changes and automatically rebuild the CSS. Run `gulp sass` to compile the CSS only. Preferably use Jenkins to run the Gulp task on build to generate the CSS. If this is possible on your project, add the `css/` folder to the `.gitignore` file and delete generated CSS from the repo. JS -- [](#js) Javascript files should be added to `js/` and to the scripts section of `ocha_basic.info` Gulp ---- [](#gulp) This project uses [Gulp 4](https://github.com/gulpjs/gulp#whats-new-in-40) If you'd like to see a task listing, run the following command: `gulp --tasks` Icons ----- [](#icons) The available icons can be found in `img/icons` There are two techniques used, depending on context. 1. SVG as a background-image value, usually on a pseudo element. The SVG fill colour is added as an attribute in the SVG file. We use this technique when using technique 2 isn't possible. The icons are black by default. If you need another color, it's best to copy the icon and manually adjust the fill/stroke to suit your needs. Rename the copy to include the color in the filename eg. `arrow-down--white.svg`. 2. SVG symbol sprite using the `` element. The SVG sprite is loaded as a single asset in the `html.tpl.php` before the closing body tag. Each icon within the sprite can be referenced by its ID eg. ``` ``` Each icon should have the class `icon` and a BEM selector if needed eg. `icon--arrow-down`. We can create associated CSS rules to control dimension and fill. We're using . See for more details. ### Generating the icons sprite [](#generating-the-icons-sprite) As defined in the gulp task, all new icons should be placed in the `img/icons` directory. Run `gulp sprites` to generate a new sprite. This generates the sprite SVG and places it in `img/icons/icons-sprite.svg` and it creates an html page with all SVGs for reference `img/icons/sprite.symbol.html`. ### Renaming icons [](#renaming-icons) When importing a new version of the Common Icons, there is a bulk-renaming command in `package.json` that can be invoked by running the following: ``` # first, cd to repo root npm run icon-rename ``` This assumes that you have a tool compatible with — you can install it on OSX using Homebrew: ``` brew install rename ``` Browser support --------------- [](#browser-support) See Favicons -------- [](#favicons) OCHA default favicons are provided. Update these with your logo. is a good tool for generating favicons. Modernizr --------- [](#modernizr) We support the [Modernizr Drupal module](https://www.drupal.org/project/modernizr) and the `ocha_basic.info` file contains the Modernizr tests we require. Find the [modernizr-custom.js](https://github.com/UN-OCHA/ocha-basic-site/blob/master/html/sites/all/libraries/modernizr/modernizr-custom.js) in the ocha-basic-site repo. After enabling the theme, go to `admin/configuration/development/modernizr` to rebuild Modernizr including the theme's feature detects: `svg`, `cssgrid`, `cssgridlegacy` and `mediaqueries`. Add to Homescreen / manifest.json --------------------------------- [](#add-to-homescreen--manifestjson) We support the [PWA Drupal module](https://www.drupal.org/project/pwa) instead of providing our own manifest.json file. The `hook_pwa_manifest_alter()` hook is implemented in `template.php` with our default colors/icons, which can be overridden using the normal PWA admin UI. Using with panels ----------------- [](#using-with-panels) Use with the Omega base theme to enable panels: - Add `base theme = omega` to ocha\_basic.info - Create your layouts using page.tpl.php as a basis ### Health Score 30 — LowBetter than 64% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community12 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 61.8% 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 ~51 days Recently: every ~75 days Total 10 Last Release 2346d ago Major Versions 1.0.0 → v2.1.02018-09-21 ### Community Maintainers ![](https://www.gravatar.com/avatar/346443feed98de86efcea04bbc5094dc2a4146181bca1e8936beb6ac46eed455?d=identicon)[unocha](/maintainers/unocha) --- Top Contributors [![left23](https://avatars.githubusercontent.com/u/1835923?v=4)](https://github.com/left23 "left23 (328 commits)")[![rupl](https://avatars.githubusercontent.com/u/254753?v=4)](https://github.com/rupl "rupl (162 commits)")[![cafuego](https://avatars.githubusercontent.com/u/148719?v=4)](https://github.com/cafuego "cafuego (25 commits)")[![amyvbenson](https://avatars.githubusercontent.com/u/2060033?v=4)](https://github.com/amyvbenson "amyvbenson (10 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (6 commits)") ### Embed Badge ![Health badge](/badges/unocha-ocha-basic/health.svg) ``` [![Health](https://phpackages.com/badges/unocha-ocha-basic/health.svg)](https://phpackages.com/packages/unocha-ocha-basic) ``` ### Alternatives [elgg/elgg Elgg is an award-winning social networking engine, delivering the building blocks that enable businesses, schools, universities and associations to create their own fully-featured social networks and applications. 1.7k15.7k5](/packages/elgg-elgg)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 44643.1k1](/packages/pressbooks-pressbooks)[johnbillion/user-switching Instant switching between user accounts in WordPress and WooCommerce. 19768.3k2](/packages/johnbillion-user-switching)[rainlab/blog-plugin Blog plugin for October CMS 17257.7k](/packages/rainlab-blog-plugin)[rainlab/user-plugin User plugin for October CMS 11954.3k13](/packages/rainlab-user-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)