BranchesTags

Repository files navigation

PatternFly reference implementation

This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

Dependencies

PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".

Development

Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.

Install Bower Components

After ensuring nodejs and npm are available, install Bower globally:

npm install -g bower

Now that Bower is available, we can install the required development components:

bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!

Install Development Dependencies

The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:

npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.

Additionally you may need to install the grunt command line utility. To do this run:

npm install -g grunt-cli

Live Reload Server

A local development server can be quickly fired up by using the Gruntjs server task:

grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.

Coding Style

  • Indentation
    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames
    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS
    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less

Build

CSS

In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:

grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.

PatternFlyIcons Font

PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.

Tests

The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.

Documentation

See https://www.patternfly.org and http://getbootstrap.com/.

License

Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.

About

PatternFly open interface project

www.patternfly.org/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
PatternFly reference implementation
This reference implementation of PatternFly is based on Bootstrap v3. Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
Dependencies
PatternFly includes a number of dependencies that are not committed to this repository. To add them, see "Install Bower Components".
Development
Development setup requires nodejs. If you do not already have nodejs and npm installed on your system, please see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for how to install on your distribution.
Install Bower Components
After ensuring nodejs and npm are available, install Bower globally:
npm install -g bower

Now that Bower is available, we can install the required development components:
bower install

At this point, you should now have a top level components/ folder with all dependencies listed in the bower.json file installed. Unless you plan to contribute to PatternFly itself, you're done. Celebrate by working on integrating PatternFly and its dependencies in your app!
Install Development Dependencies
The development includes the use of a number of helpful tasks. In order to setup your development environment to allow running of these tasks, you need to install the local nodejs packages declared in package.json. To do this run:
npm install

This will install all necessary development packages into node_modules/. At this point, the gruntjs tasks are available for use such as starting a local development server or building the master CSS file.
Additionally you may need to install the grunt command line utility. To do this run:
npm install -g grunt-cli

Live Reload Server
A local development server can be quickly fired up by using the Gruntjs server task:
grunt server

This local static asset server (i.e., http://localhost:9000) has the advantage of having livereload integration. Thus, if you start the Gruntjs server, any changes you make to .html or .less files will be automatically reloaded into your browser and the changes reflected almost immediately. This has the obvious benefit of not having to refresh your browser and still be able to see the changes as you add or remove them from your development files.
Coding Style
  • Indentation

    • Use spaces (not tabs)
    • Indentation size is 2 spaces
  • Filenames

    • All filenames will use a lowercase-hyphenated naming convention (e.g., single-select-dropdown.less)
  • LESSCSS

    • CSS class names use lowercase-hyphenated naming convention (e.g., .navbar-nav)
    • Alphabetize rules by selector
    • Alphabetize properties by declaration
    • Define or override variables centrally in less/variables.less
    • Define or override mixins centrally in less/mixins.less
Build
CSS
In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task:
grunt build

This task will compile and minify the lesscss files into a single CSS file located at dist/css/patternfly.min.css.
PatternFlyIcons Font
PatternFlyIcons font is generated using IcoMoon. LoadPatternFlyIcons-webfont.json as a new project in IcoMoon and update as necessary. Please commit the updated PatternFlyIcons-webfont.json file in addition to the updated font files and supporting LESS/CSS changes.
Tests
The tests/ directory contains HTML pages with component and pattern examples in order to facilitate development. Please consult the official documentation (see below) for full details on how to use PatternFly.
Documentation
See https://www.patternfly.org and http://getbootstrap.com/.
License
Modifications to Bootstrap are copyright 2013 Red Hat, Inc. and licensed under the Apache License 2.0.
About
PatternFly open interface project
www.patternfly.org/
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors