gs.content.css Documentation¶
Contents:
Layout¶
The CSS layout is based on a 16px typeface on a 20px line, with all measurements specified in ems. Below is a table that can be used to convert between units, pixels and ems. (All measurements should be multiples of half-units).
| Without Border Width (in em) | |||||
|---|---|---|---|---|---|
| Units | px | em | Thin (1px) | Medium (3px) | Thick (6px) |
| 0.5 | 10 | 0.625 | 0.562 | 0.438 | 0.250 |
| 1.0 | 20 | 1.250 | 1.188 | 1.062 | 0.875 |
| 1.5 | 30 | 1.875 | 1.812 | 1.688 | 1.500 |
| 2.0 | 40 | 2.500 | 2.438 | 2.312 | 2.125 |
| 2.5 | 50 | 3.125 | 3.062 | 2.938 | 2.750 |
| 3.0 | 60 | 3.750 | 3.688 | 3.562 | 3.375 |
| 3.5 | 70 | 4.375 | 4.312 | 4.188 | 4.000 |
| 4.0 | 80 | 5.000 | 4.938 | 4.812 | 4.625 |
| 4.5 | 90 | 5.625 | 5.562 | 5.438 | 5.250 |
| 5.0 | 100 | 6.250 | 6.188 | 6.062 | 5.875 |
| 5.5 | 110 | 6.875 | 6.812 | 6.688 | 6.500 |
| 6.0 | 120 | 7.500 | 7.438 | 7.312 | 7.125 |
| 6.5 | 130 | 8.125 | 8.062 | 7.938 | 7.750 |
| 7.0 | 140 | 8.750 | 8.688 | 8.562 | 8.375 |
| 7.5 | 150 | 9.375 | 9.312 | 9.188 | 9.000 |
| 8.0 | 160 | 10.000 | 9.938 | 9.812 | 9.625 |
| 8.5 | 170 | 10.625 | 10.562 | 10.438 | 10.250 |
| 9.0 | 180 | 11.250 | 11.188 | 11.062 | 10.875 |
| 9.5 | 190 | 11.875 | 11.812 | 11.688 | 11.500 |
| 10.0 | 200 | 12.500 | 12.438 | 12.312 | 12.125 |
For values above 10u use the following formula:
u × 20.0
em = ────────
16.0
The only complication are borders. They can throw out the rhythm, so must be taken off the margin or padding. The last three columns in the above table have the border widths taken out. For values above 6u take away one of the following three values:
| Size | px | em |
|---|---|---|
| Thin | 1 | 0.063 |
| Medium | 3 | 0.188 |
| Thick | 6 | 0.375 |
Icons¶
An glyph-font is supplied by this product to provide the icons that are used in the interfaces, as detailed below. Two patterns from CSS Tricks are used to display the icons:
The latter is used to display the Loading animation.
Icon details¶
Below are the details of the 22 icons provided by
gs.content.css. Where possible the glyphs are mapped onto
standard Unicode code points, with the XML character entity given
in the Character column. Using Unicode code-points allows them
to look vaguely right when typefaces other than the glyph-font
are being used. The non-standard icons are placed at the start of
the private-use area.
| Icon | Character | Std? | Note |
|---|---|---|---|
| Breadcrumb trail | |||
| Home | ⌂ |
Yes | A house |
| Separator |  |
No | A right-pointing chevron |
| Navigation | |||
| Left/Prev | ◃ |
Yes | Replaces “small left-triangle” |
| Up | ⬆ |
Yes | Replaces bold up arrow |
| Right/Next | ▹ |
Yes | Replaces “small right-triangle” |
| Web feed |  |
No | The RSS or ATOM symbol |
| Settings | ⚙ |
Yes | A cog |
| Lock | 🔒 |
Yes | Sign in |
| Actions | |||
| Share |  |
No | Arrow pointing out of a box |
| Reply | ➦ |
Yes | Arrow curving right (redo) |
| Delete | 🗑 |
Yes | Wastebasket (rubbish, trash) |
| Search | 🔍 |
Yes | Magnifying glass |
| Install |  |
No | Arrow pointing to a disk druve |
| True icons | |||
| Picture | 🎨 |
Yes | Replaces “artist palette” |
| Movie | 🎦 |
Yes | Replaces “movie projector” |
| Sound | 🔉 |
Yes | Speaker |
| Documents | 🗍 |
Yes | Replaces “empty pages” |
| Archive |  |
No | For zip and tar files |
| Attach | 📎 |
Yes | Paperclip (attachments exist) |
✉ |
Yes | An envelope | |
| Pin | 📌 |
Yes | For sticky topics |
| Linux |  |
No | Tux, for <groupserver.org> |
| Groupserver |  |
No | “GS”, for <groupserver.org> |
| Social-media services | |||
f |
No | The f character |
|
| Google Plus | g |
No | The g character |
t |
No | The t character |
|
| Devices | |||
| Mobile |  |
No | A cell-phone |
| Tablet |  |
No | |
| Laptop |  |
No | |
| Desktop |  |
No | A monitor, or screen |
| Text editing | |||
| Bold |  |
No | A bold B |
| Italic |  |
No | A italic I |
| Superscript |  |
No | x² |
| Subscript |  |
No | x₂ |
| Unlink |  |
No | A broken chain |
| Link |  |
No | A chain |
ul |
 |
No | Unordered list icon |
ol |
 |
No | Ordered list icon |
| Indent |  |
No | Indent list left |
| Outdent |  |
No | Indent list right |
| Code |  |
No | </> |
| Table |  |
No | |
| Paste |  |
No | A page and clipboard |
| Undo | ⎌ |
Yes | |
| Redo |  |
No | |
| Activity | |||
| spinner |  |
No | Animated (see Loading below) |
Enhance a word¶
Two data attributes can be used to add icons in order to enhance a word.
<button data-icon="◃">Newer</button>
<button data-icon-after="▹">Older</button>
The first attribute is data-icon. It take the character to
display (a left arrow in the above example) as its argument. That
character is displayed before the text within the element. By
using the data-icon attribute screen-readers do not “speak”
the icon, and older browsers degrade gracefully.
The second example above shows the data-icon-after
attribute. It displays the icon after the text within the
element; it is mostly used for Next buttons.
Standalone icons¶
Standalone icons need additional markup so screen-readers can “read” what the icon is, while visual browsers see the glyph. For example, the following displays a Web feed icon:
<a type="application/atom+xml" class="icon-alone" href="/some/feed.atom">
<span aria-hidden="true" data-icon=""></span>
<span class="screen-reader-text">Web feed</span>
</a>
- The outer element is marked up with the
icon-aloneclass. - The second element provides the icon, using the same
data-iconattribute that is used to enhance a word. Thearia-hiddenattribute prevents screen readers from “saying” the icon. - The third and final element provides the text for the
screen-reader. It is given the
screen-reader-textclass so it is hidden to visual browsers.
Loading¶
When loading data using AJAX it is desirable to show that
activity is taking place in the background. To do this the
Loading icon-character is provided with some CSS3 to animate the
icon so it spins. To create a Loading icon add a standalone icon
with the loading class:
<span data-icon="" aria-hidden="true"
class="loading"> </span>
| Note: | The space in the <span> </span> is important. Markup
processors (such as TAL) can turn XHTML self-closed
elements (<span/>) into unclosed elements. The side
effect is the entire paragraph is spun. |
|---|
Acknowledgements¶
The Twitter Bootstrap CSS is pasted at the start of the GroupServer file to eliminate the need for an HTTP request. It is licenced under the Apache License, Version 2.0. The included CSS is a modified version of Bootstrap 2.3.0. Refer to the documentation for 2.3.2 to learn more. Do note that the following components have been removed from the included version of Bootstrap:
- The grid system
- Responsive utility classes
The Icons were taken from two glyph-fonts:
- Font Awesome by Dave Gandy provided the text-editing icons, the devices, the spinner, and the pin-icon. It is licenced under the CC BY 3.0 license.
- Entypo by Daniel Bruce provided most of the icons. It is licenced under the CC BY-SA 3.0 license.
The IcoMoon App, by Keyamoon, was used to crate the font-files.
Authors¶
Josh Campbell did the initial design and implementation
(GroupServer 0.9) that was part of the Products.GroupServer
product. Ben Ford from Metasolutions did a major redesign
(GroupServer 1.0) that was implemented in this product. Mike
Harding from Cactus Lab re-imagined the design into
GroupServer 2.0. The CSS coding for the all versions from 1.0
onward, and egg creation, was by Michael JasonSmith.
Changelog¶
2.6.7 (2016-01-28)¶
- Following the changes to gs.content.js.multifile and gs.group.messages.topic.base
2.6.6 (2015-12-09)¶
- Following the changes to gs.profile.email.settings
2.6.5 (2015-11-12)¶
- Adjusting the Share popup from gs.content.js.sharebox to make space for the new Copy button
2.6.4 (2015-11-06)¶
- Making the white-space significant (
white-space: pre-wrap) in the posts on the web.
2.6.3 (2015-10-27)¶
- Updating the version number in the
site.cssresource
2.6.2 (2015-09-30)¶
- Following the changes in gs.group.messages.post.base to Microformats 2
2.6.1 (2015-03-20)¶
- Improving the rendering of posts on small screens, with thanks to Piers
- Truncating the name of the author on the Image page when it is wider than the containing box.
2.6.0 (2015-03-10)¶
- Adding the CSS for the Verify page
- Adding the CSS for the Verify wait page
2.5.0 (2015-03-03)¶
- Stopping the scroll-bar from appearing in the header of the Post page
- Moving the Group email settings button to the right of the Member information box on the Group page
- Naming all the reStructuredText files as such
- Pointing at GitHub as the primary repository
2.4.2 (2014-06-24)¶
- Removing the margin form the ul at the bottom of the gs.group.member.active viewlet
2.4.1 (2014-05-15)¶
- Fixing some CSS errors
2.4.2 (2014-03-05)¶
- Fixing the clipping of the filename on the Image page
- Fixing the profile images in Reply to topic and Start a new topic, closing Bug 4082
2.4.1 (2014-02-17)¶
- Fixing the URL to the EOT version of the icon-font
2.4.0 (2014-01-27)¶
- Adding support for the Invite by CSV page
- Fixing some clipping in posts
2.3.1 (2013-11-27)¶
- Fixing Chrome and Safari so they animate the loading icon
2.3.0 (2013-11-26)¶
- Turning the editor back on for content editor pages
- Added the animated swirl icon
- Added new glyph icons:
- Install
- Archive
- Linux
- GroupServer
- Devices (mobile, tablet, laptop, desktop)
- Text editing
- Dealing with corner-cases with search, closing Feature 4038
- Fixing the Group page for an announcement group
- Removing the bitmap icons from the Bootstrap code
2.2.3 (2013-11-05)¶
- Adding a minified version of the CSS
2.2.1 (2013-10-15)¶
- Adding a new break-point at 460px
2.2.0 (2013-09-24)¶
- Turning a menu into an inline list on small screens, closing Feature 3909
- Hiding the breadcrumbs on pages with a context-menu
2.1.0 (2013-09-11)¶
- Adding support for the Members page, closing Feature 3862
- Fixing some boxes when they overflow
- Adding a
printstyle - Making the header-links generic
2.0.2 (2013-07-24)¶
- Removing a hack from the About box on the Group page
2.0.1 (2013-07-08)¶
- Fixing a gap on the Topics list of the Group page
2.0.0 (2013-06-07)¶
- Updating to the new GroupServer user interface
- Implementing a flat design aesthetic, designed by Mike Harding from Cactus Lab
- Switching to Twitter Bootstrap 2 for the core CSS
- Adding icon-fonts
1.4.1 (2012-06-13)¶
- Fixing the sticky-topic icons
1.4.0 (2012-06-06)¶
- Adding support the One true search system (see gs.search.base)
1.3.0 (2012-05-30)¶
- Adding support for the Encouragement for a group administrator
- Refactoring the About tab on the group page
1.2.0 (2012-05-16)¶
- Adding the support for the Topics tab, the Posts tab, and the Files tab on the Group page
1.1.1 (2011-12-05)¶
- Adding the style for the
<cite>element back - Tweaking the style for nested lists
1.1.0 (2011-07-26)¶
- Adding the CSS for sign-up methods
1.0.0 (2011-07-14)¶
Initial commit. Prior to the creating of this product the CSS was provided as a file-system site component by the Products.GroupServer product.
The core GroupServer CSS code implements a style known as Colour is for happy people. It is deliberately devoid of colour: a monochrome palette of black, white and greys is used. This means that everything has to rely on Layout (alignment and proximity), shape and typography to make sense. The typography is supported by some glyph Icons.
To this core layout different colourful skins can be added. See gs.skin.green and gs.skin.blue for two examples.