From 461320eeeea0981af22e46e9faac7056e3d6ccf2 Mon Sep 17 00:00:00 2001
From: Biyeun Buczyk
+ This is a communication and reference tool. It can be used to help make decisions that
+ have already been thoughtfully made.
+
+ Why all the biology-related terminology? It comes from the notion of atomic design.
+ Atomic design relates design to the hierarchies and building processes of the natural world.
+ It uses five stages: atoms, molecules, organisms, templates, and pages.
+
+ HQ doesn't completely follow this methodology, but the rough ideas can still make for
+ a useful communication framework.
+
+ By taking similar, simplified base patterns, often called atoms,
+ we can build cohesive molecules and then more complex organisms.
+ This keeps code cleaner and lighter while also keeping things simpler for our users to understand.
+
+ Some general principles to keep in mind:
+
+ How much effort does a user have to expend on your design?
+ Group related information together.
+ Consider multiple designs.
+ This section discusses the most basic elements of design on HQ.
+ Much of this information is a level of detail that developers don't deal with on a day-to-day basis:
+ the fonts, colors, etc. that underlie the classes and widgets used to build pages.
+
+ This section covers the most common components used in CommCare HQ and how to use them well.
+ Additionally, it covers any modifications or additions that have been made to these components
+ on top of what might be supported by Bootstrap's framework by default.
+
+ These "molecules" build on the base concepts like typography, colors, and accessibility introduced in the atoms
+ section.
+
+ A key point of this section is to keep concepts and design focused in order
+ to avoid the phenomenon of
+ analysis paralysis.
+
+ Molecules connect into organisms: even larger building blocks, the kind that make up a substantial
+ portion of the design of a new feature or significant update to an existing feature.
+
+ It's often said that CommCare HQ is basically a site of forms and tables, as those are the biggest "organisms"
+ that make their way to new features and pages.
+
+ Very rarely are other "organisms" introduced, and covering that is outside the scope of this guide and will
+ likely be part of a greater Design Spec discussion.
+
+ Templates structure free-floating molecules and organisms into a context: a specific page.
+
+ Dimagi’s product design team firmly believes that web and
+ software experiences should be accessible for everyone,
+ regardless of abilities or impairments.
+
+ This guide will help ensure that our experiences meet the standards for
+ accessibility required by law (WCAG AA, Section 508, European Standards). Patterns should be perceivable, operable,
+ and understandable to users, even when using assistive technology.
+
+ Accessible products give every user the same benefits regardless of ability and can adapt to any user in any
+ context. Disabilities can be situational (an end user with typical vision may struggle to view their screen in a
+ bright or sunny environment), temporary (a person with a broken wrist may not be able to type in HQ but will regain
+ ability when healed), and long-lasting (barriers from birth, an illness, disease, accident, or developed over age;
+ some may not consider themselves to have disabilities even if they experience functional limitations). We design
+ and build products for everyone.
+
+ "Everyone" includes
+
+ Consider the following barriers when designing and coding
+
+ Throughout the documentation, when possible, we will call out A11y. For example, checking color contrast in
+ the buttons. We aim for AA compliant color contrast. You can check color contrast in tools such as
+ https://webaim.org/resources/contrastchecker/.
+
+ Try Chrome extension Funkify to experience some common barriers.
+
+ Read more about a11y at
+
+ In 2020, USH began a web accessibility improvement effort, specifically surrounding screen readers.
+ This document details
+ an overview of the effort, deficiencies found by an outside agency of CommCare, recommendations, and resources.
+
+ Quick ways to test for web accessibility*
+
+ Font choice can have a strong yet subtle effect on how users perceive content.
+
+ HQ uses Nunito Sans as its default font.
+ This is embdedded in our base template and is consistent with dimagi.com.
+ Nunito Sans paragraph Nunito Sans strong Nunito Sans emphasis Nunito Sans paragraph Nunito Sans strong Nunito Sans emphasis
+ Use color for communication over decoration.
+ Use of color should be purposeful, accessible, and help focus attention to what matters most.
+
+ We strive to establish recognizable patterns to guide users through the UI.
+ CommCare uses similar palettes on both the mobile and server side.
+
+ When combining colors, use light text on a dark or medium background
+ and dark text on a light background. We make use of Bootstrap 5's
+
+ As described in Accessibility,
+ many people are affected by various types of color blindness.
+ It is important to make sure that colors are never the source
+ of critical information. Also, when colors are used to compare information
+ (legend of a bar or line chart) it is important that the colors used
+ can be differentiated by people with each type of color blindness, and when color separation is
+ not easily possible, distinguishable patterns are used in their place.
+
+ For specific usage (with different shades), please refer to things like Buttons and Alerts in the
+ Molecules section. This is intended for quick reference and to convey big-picture ideas.
+ {{ swatch.description }}
+ Visual communication can be essential in scanning and understanding for populations whose first language
+ may not be English. Please be sympathetic with the goal of cohesion and don’t use an icon for a purpose it
+ was not intended for.
+
+ Consistent iconography in any user interface is critical to creating
+ a product that is highly accessible across all different levels of
+ literacy. Icons may need to be localized for different cultures and languages.
+
+ Good icons use simple, graphic shapes so they can be understood even at a small size.
+ They have little detail. They are as universal as possible, consistent with other
+ platforms.
+
+ Primary icons are used for navigation or interaction.
+ Primary icons are interactive, they change the surround environment or data. They likely don’t need to be coupled with text.
+
+ Secondary icons provide clarity.
+ Secondary icons are used before text to communicate topical information.
+
+ Most of HQ's icons come from
+ FontAwesome.
+ All icons in FontAwesome are already built into HQ.
+ Other icons have been custom created for HQ.
+
+ HQ has its own set of icons custom created to communicate HQ-specific concepts. The majority of these icons
+ are found in App Builder and Form Designer.
+
+ If a suitable icon doesn't exist in FontAwesome or HQ's custom set,
+ another great resource for icons is the
+ Noun Project.
+ Typically, once a Noun Project icon is chosen,
+ it is best practice to add that icon as a glyph in the CommCare HQ font.
+
+ On a Mac, the best program to edit this font is
+ Glyphs. You should open the
+
+ Glyphs has a great article on
+ creating an icon webfont.
+ If you are adding a new glyph, this is a must-read. Below are some
+ highlights of the process.
+
+ Open the svg or eps file in either Adobe Illustrator or Inkscape and
+ make any fine edits necessary to make the icon fit the style of
+ the rest of the icons available to the CommCare HQ Font.
+
+ Open CommCareHQFont.glyphs
+ in Glyph.app and follow the steps in the
+ tutorial
+ to add a new glyph in the private domain. Make sure the unicode
+ address you've chosen does not overlap with any existing glyphs or
+ public domain characters.
+
+ Copy your vector graphic into the Glyphs glyph editor. Resize as necessary
+ so that the glyph is large enough to fit in with the rest of the HQ fonts.
+ Make sure that the
+ A good way of checking whether your new glyph is sized properly
+ is to look at it in the Glyphs overview pane and compare it to the
+ existing glyphs in the font. Make sure that the baseline (bottom of the
+ glyph) looks natural and that the scale and height of glyph fit with
+ the rest of the glyphs in the font.
+
+ Once you've added your new glyph, you will need to export your font
+ to
+ Update:
+ Save the final
+ To make the font universally readable across most browsers, you'll need
+ to have an
+ Here are some screenshots of settings for the font generator in
+ Expert Mode:
+
+
+ Copy the resulting
+ Add a reference to the icon's font unicode value as a variable in
+
+ Add the
+ Use your new icon!
+
+
+ How to Use This Guide
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+ Atomic Design and how we organize stylistic concepts
+
+
+
+
+ Consider both the effort to understand it in the first place, and then the effort to use it on an ongoing basis.
+
+ Visually emphasize content according to its importance.
+ If you were to step back and squint at your feature, or if you couldn't read the text, how well
+ could you guess what to read first and what to click?
+
+ Just the practice of making yourself consider alternatives can lead to
+ better designs and stronger design rationale.
+ Atoms
+
+
+
+ Molecules
+
+
+
+ Organisms
+
+
+
+ Templates and Pages
+
+
+{% endblock content %}
diff --git a/corehq/apps/styleguide/templates/styleguide/bootstrap5/partials/sidebar.html b/corehq/apps/styleguide/templates/styleguide/bootstrap5/partials/sidebar.html
new file mode 100644
index 000000000000..6c8a17f59760
--- /dev/null
+++ b/corehq/apps/styleguide/templates/styleguide/bootstrap5/partials/sidebar.html
@@ -0,0 +1,32 @@
+
+ Browse Guide
+
+ Accessibility
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+
+ Overview
+
+
+ Audience
+
+
+
+
+
+
+ Color-blindness: A11y Color Contrast Standards
+
+ A11y check
+ AA CONTRAST 4.86:1
+ AAA Contrast 7.01:1
+
+ AAA Contrast 12.05:1
+ AAA Contrast 11.07:1
+
+
+
+ Designing for Screen Readers
+
+
+
+{% endblock content %}
diff --git a/corehq/apps/styleguide/urls.py b/corehq/apps/styleguide/urls.py
index 8e90f3c4bd1f..a745fb4669b5 100644
--- a/corehq/apps/styleguide/urls.py
+++ b/corehq/apps/styleguide/urls.py
@@ -29,4 +29,6 @@
name=PagesStyleGuideView.urlname),
url(r'^docs/', include(doc_urlpatterns)),
url(r'^b5/$', bootstrap5.styleguide_home, name="styleguide_home_b5"),
+ url(r'^b5/atoms/accessibility/$', bootstrap5.styleguide_atoms_accessibility,
+ name="styleguide_atoms_accessibility_b5"),
]
diff --git a/corehq/apps/styleguide/views/bootstrap5.py b/corehq/apps/styleguide/views/bootstrap5.py
index 072bd4c3df3b..7c0bb9518578 100644
--- a/corehq/apps/styleguide/views/bootstrap5.py
+++ b/corehq/apps/styleguide/views/bootstrap5.py
@@ -5,3 +5,8 @@
def styleguide_home(request):
return render(request, 'styleguide/bootstrap5/home.html', get_navigation_context("styleguide_home_b5"))
+
+
+def styleguide_atoms_accessibility(request):
+ return render(request, 'styleguide/bootstrap5/atoms/accessibility.html',
+ get_navigation_context("styleguide_atoms_accessibility_b5"))
From 842fc1fde06a0666e94fa6b7189e41b82ddbe797 Mon Sep 17 00:00:00 2001
From: Biyeun Buczyk Typography
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+
+ Font Face
+
+ Nunito Sans H1
+ Nunito Sans H2
+ Nunito Sans H3
+ Nunito Sans H4
+ Nunito Sans H5
+ Nunito Sans H6
+ Nunito Sans H1
+ Nunito Sans H2
+ Nunito Sans H3
+ Nunito Sans H4
+ Nunito Sans H5
+ Nunito Sans H6
+
+ Further Reading
+
+
+
+{% endblock content %}
diff --git a/corehq/apps/styleguide/urls.py b/corehq/apps/styleguide/urls.py
index a745fb4669b5..c9001f166ae8 100644
--- a/corehq/apps/styleguide/urls.py
+++ b/corehq/apps/styleguide/urls.py
@@ -31,4 +31,6 @@
url(r'^b5/$', bootstrap5.styleguide_home, name="styleguide_home_b5"),
url(r'^b5/atoms/accessibility/$', bootstrap5.styleguide_atoms_accessibility,
name="styleguide_atoms_accessibility_b5"),
+ url(r'^b5/atoms/typography/$', bootstrap5.styleguide_atoms_typography,
+ name="styleguide_atoms_typography_b5"),
]
diff --git a/corehq/apps/styleguide/views/bootstrap5.py b/corehq/apps/styleguide/views/bootstrap5.py
index 7c0bb9518578..6bf97147df62 100644
--- a/corehq/apps/styleguide/views/bootstrap5.py
+++ b/corehq/apps/styleguide/views/bootstrap5.py
@@ -10,3 +10,8 @@ def styleguide_home(request):
def styleguide_atoms_accessibility(request):
return render(request, 'styleguide/bootstrap5/atoms/accessibility.html',
get_navigation_context("styleguide_atoms_accessibility_b5"))
+
+
+def styleguide_atoms_typography(request):
+ return render(request, 'styleguide/bootstrap5/atoms/typography.html',
+ get_navigation_context("styleguide_atoms_typography_b5"))
From f9a0f8d213dc6aa3ddf7797864b6dbdc80e50992 Mon Sep 17 00:00:00 2001
From: Biyeun Buczyk Colors
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+
+ Colors for Communication
+
+ $min-contrast-ratio
setting at a value of
+ 3 to automatically determine when to show dark or light text on a background when using
+ the text-bg-<$color>
class on an element.
+
+ Interaction and Attention
+
+
+ Neutral Colors, Text and Backgrounds
+
+ {{ swatch.title }}
+
+ ${{ swatch.main_color.slug }}
+
+
+ #{{ swatch.main_color.hex }}
+
+ Icons
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+
+ Overview
+
+
+ Primary vs Secondary Icons
+
+
+ Custom Icons
+
+
+ Creating New Icons
+
+ CommCareHQFont.glyphs
file in Glyphs and add your fonts to an available
+ private unicode space.
+ Edit the icon in a vector graphics program first
+ Create a new private domain glyph in the CommCare HQ Font
+ Edit the New Glyph
+ L
and R
values in the glyph info
+ are never negative (ideally they are both 0).
+ Check the Glyph's Scale and Width
+
+ Saving the Edited Glyphs File
+
+ *.otf
. Check Use Production glyph names
and
+ Remove Overlap
.
+ Remove Overlap
caused the bottom half of the
+ CommCare flower to be removed. Un-checking that setting seemed to
+ generate better results. YMMV
+ *.otf
font to
+ corehq/apps/hqwebapp/static/hqwebapp/font/CommCareHQFont-Regular.otf
.
+
+ Prepping for Cross Browser Compatibility
+
+ eot
, svg
, ttf
,
+ and woff
version of it. Use the
+ Font Squirrel Webfont Generator
+ to do this.
+
+ NOTE: unlike in this settings image, select No Subsetting.
+ Otherwise the private use glyphs will be removed
+ (source).
+ eot
, svg
, ttf
,
+ and woff
files to corehq/apps/style/static/style/font/
+ when you are done.
+
+ Adding the New Glyph to the Stylesheet
+
+ corehq/apps/style/static/hqwebapp/less/font-commcare/variables.less
.
+ :before
styling for the class of the icon in
+ corehq/apps/style/static/hqwebapp/less/font-commcare/icons.less
.
+ <i class="fcc fcc-fd-signature"></i>
+
+ {{ icon_set.name }}
+
+ {% for icon in icon_set.icons %}
+ <i class="{{ prefix }} {{ icon }}"></i>
+ New Icons
-
+ Good styling code, like any good code, is reusable, DRY, and semantic.
+
+ Most of us don’t write much CSS. HQ uses
+ Bootstrap 5.3, which
+ gives us a consistent and fairly comprehensive set of styles. Most of the "styling" we do is
+ picking the appropriate Bootstrap (or HQ) classes and then troubleshooting anything unexpected.
+
+ We use SASS / SCSS to write styles.
+ SASS is a powerful extension of CSS that allows for more maintainable and reusable styling
+ by supporting variables, mixins, and so much more. SCSS is a flavor of SASS with a syntax
+ closer to CSS syntax where the use of semicolons and braces are mandatory.
+ Since Bootstrap 5 uses the SCSS flavor of SASS, we also have chosen to use SCSS.
+
+ Reusable CSS is good for the same reasons reusable code is good everywhere else. On the front end,
+ reusable code is also correlated with visual consistency and generally better UX. To that end, when
+ creating a new page or section:
+
+ Bootstrap takes care of a lot this: it gives us a consistent framework so our pages look like each other,
+ and that framework is designed to resemble the rest of the internet.
+
+ Good styling is semantic, because that makes it easier for other developers to reuse.
+ Ideally, a visual designer decides what an error looks like, or what a CRUD page looks like, and then
+ developers only need to determine that they're displaying an error, or creating a CRUD page, and the look
+ and feel is taken care of.
+
+ Classes like
+ Most styling should live in external SCSS files.
+
+ Most HQ-specific styling lives in external SCSS files, typically in
+
+ App-specific styling
+ can live in
+ Some pages use in-page
+ Inline styling is generally a bad idea for the same reasons as in-page styling: one-off styling
+ isn't good for consistency and often isn't semantic.
+
+ Disorganized z-indices lead to highly visible bugs.
+
+ Z-index gives you control over the stacking order of elements. The challenge is that
+ it acts like a global variable and, like any global variable, gets hard to keep track of.
+ HQ deals with this as best as it can, by declaring numeric z-index values as variables in
+ variables.scss
+ and using the variables in other SCSS files. This isn't perfect, but it at least gives us
+ one place to define HQ-specific absolute z-index values - which also need to play nicely
+ with Bootstrap's z-index list.
+
+ Most z-index issues arise from not having a good handle on all of the different values
+ used in an application, but there are a few other complexities that occasionally cause problems:
+ `0;^g`S-L^mOu9Hn?V=W 15v~G+lDQ|y#+8{@w^5n@(7|B?ZA*H)zfu!o=cl
+
NOTE: unlike in this settings image, select No Subsetting.
Otherwise the private use glyphs will be removed
(source).
From 21fae92999385963ab6e8351344da3c358ac5085 Mon Sep 17 00:00:00 2001
From: Biyeun Buczyk Code Guidelines
+ On this page
+
+
+{% endblock toc %}
+
+{% block content %}
+
+ Overview
+
+
+
+ .bump-down { margin-top: 10px; }
are problematic because it isn't clear when
+ and why they should be used, so they get applied inconsistently, and we end up with a site that looks
+ a little bit...off...but it isn't obvious why. Bootstrap is a good example of a largely semantic system:
+ classes have names like .btn-danger
rather than .btn-red
, to make it clear why
+ you should use a particular class.
+
+ Style Hierarchy
+
+ corehq/apps/hqwebapp/static/hqwebapp/scss
.
+ corehq/apps/style/static/APPNAME/scss
and then be
+ included with <link>
tags in the appropriate template.
+ <style>
blocks. This isn't ideal for two reasons:
+
+
+
+ Handling Z-Index
+
+
+
+{% endblock content %}
diff --git a/corehq/apps/styleguide/urls.py b/corehq/apps/styleguide/urls.py
index 5d56f3d93e6e..88541b6ed2c7 100644
--- a/corehq/apps/styleguide/urls.py
+++ b/corehq/apps/styleguide/urls.py
@@ -29,6 +29,8 @@
name=PagesStyleGuideView.urlname),
url(r'^docs/', include(doc_urlpatterns)),
url(r'^b5/$', bootstrap5.styleguide_home, name="styleguide_home_b5"),
+ url(r'^b5/guidelines/$', bootstrap5.styleguide_code_guidelines,
+ name="styleguide_code_guidelines_b5"),
url(r'^b5/atoms/accessibility/$', bootstrap5.styleguide_atoms_accessibility,
name="styleguide_atoms_accessibility_b5"),
url(r'^b5/atoms/typography/$', bootstrap5.styleguide_atoms_typography,
diff --git a/corehq/apps/styleguide/views/bootstrap5.py b/corehq/apps/styleguide/views/bootstrap5.py
index 9d3a48b9c6f1..06339c67907c 100644
--- a/corehq/apps/styleguide/views/bootstrap5.py
+++ b/corehq/apps/styleguide/views/bootstrap5.py
@@ -13,6 +13,11 @@ def styleguide_home(request):
return render(request, 'styleguide/bootstrap5/home.html', get_navigation_context("styleguide_home_b5"))
+def styleguide_code_guidelines(request):
+ return render(request, 'styleguide/bootstrap5/code_guidelines.html',
+ get_navigation_context("styleguide_code_guidelines_b5"))
+
+
def styleguide_atoms_accessibility(request):
return render(request, 'styleguide/bootstrap5/atoms/accessibility.html',
get_navigation_context("styleguide_atoms_accessibility_b5"))
From 92918268e73e823e8cbad039140c4c546dcd8200 Mon Sep 17 00:00:00 2001
From: Biyeun Buczyk
+
+ z-index: 9999
, you don’t have to set the z-index on all of its children to 1000,
+ they just come along for the ride. But there are other properties that also create new stacking
+ contexts where you might not expect it. position: fixed
is one, translucent elements
+ is another.
+
+ The others are pretty obscure.
+
+ h04JaTA*R=KHI=arR*IgtMO=x4?gGkz7y7
zN8YEd0i)Y4LXYzVWtV5@K}`1Zdn&AAX|6IH>7|aa7$Q_J`<@J(<`AC?n1R?mUkMm0
zXl0F>O=I9+z0ztFc^zJih{
z$9LUqzAiADwk$Mqu)@H4q{^7wkuf>H_MQow@n
z&Xf#r9DIM^noy>(nuo4;c)I}
zy>PP65L6SOeag_?ZsDVgqF6^}%C*04hXQO+|8*`^3a`CsndO{z?UxvU*%L#(97M!1
zO7SuSC?d0`&aXVnraL1UwWHDoy98J)I?;fq@Av(Qqj37ImjRg{>-s$gNxnqX@kE2Q
zKA%&gmePN3n;5XLU=j#F+u-_pvQ5#|y(%^r?AB31GK(p>@EQO&%Qfm?W$s2a66oWi
zRV`FVV{u-wZ{WB2>uCpAy85$!`fnaJEOUI?=poSOXw%nmOYzu9w(hgQ)lcvslUR0{
zl&iX@@IJ44@jje$(<;-oU#AYKk|bZ9IyWo<-{tuI@uq+vzqmd8S-RH-RB=|X@3MyI
zdQjf5IW9p_B~+G&UTr$8Wmd-8s_%A&NW^I_HYcSekaH+eX$i5iyl
z<+4!{Ws7p`jeOM+JoW)D?fL0pk#u$pUK8#U{8q9F{Gq|cHuDryUd0-Mc25tjI%X6O
zD}-$oV?sQo%`8jq9agM*xz^p%t3-%tHc6tTc7wED9Nmm_ywQ?-PJC9D4aSfE0q6d=
z2KxsV#2yC2{~qe(^Vn&()O>Ya-Ov%4gcH~)c0|U%
ZqmwQhS6usdvTI6CK=F6>3!g)VlgZzKbu$wsmg2bdM*b3Am
zXUnpA(AZ4`5Q`lWTeoP{^1*~LZaH5HH>8%Q3!R+5aYzscBC$OfV5IZ2dkcu^4@(os
zz{(=Oy|#G)PgKd_!c*3m;(Nd&BD-i;O8X6_<5j%8G}Pj3ju5_9k$ksAHYQ4bhnmE@
ztg?^w(9Ue%v-9+i!%^$hMh#1;X-lcxgVJq>
rF%KSvpJsg
zA=`(?YnecYgp5^dTv?LHvQO8^Ma(WmmjMy7_(le?u6`@qQ{o^dD@N13Hg|OhV7lew
zD}WO!%)83Zg#BCHPyAvDH?07y5+(AO$)T5sbcG7wYXI($dPIm>3rIhHf$&XP!2DY|
zufkh1ABV63Pp5lAdF#nI0>JkA2U!5HBeQ#pW1M-)01Q((R-?K6YZQWr-2Exnova3R
zL6+VW#RN5m`4`;9i-?9dJ?n&r8_~Nz6(7q1vEs1`>iAf)LeSg15H~}GiwD*aVzWj$
z&5VVMXPlI#jO#`tHh84`sh1VsqLPZJI3tc~s>lA=5|)t1rG~0mSZimI@73uJpxegR
zMyENxP(R=O!LeZ5pqF1igG)_4lGwctf~?fS5=BSB@tf;|G}gW>0vuU~g?m7b+UicV
z0fRpp=lS>hcqZqO^K^@%!4CYNgfU5!%e{&mLywDHTZQePOMHnc#h%w2Z!tIR
MH-I&CB}+`MKU6^1b$7PViC{qTvPLgh~n~VyO-%qnbt=HL(6C20D1%B
zCNyhavA;f6hUI)hBht)Rj_n6XLksR}lLnRikt}kA%1Gm^pZt*$mrbh?^fR%jKY8W0
zN7%GKG3OW>^%p5vq8Luv$-ilm^hJP0#WHyMg@ka#pN+vSk`YCV*YX9m_)Q