{"id":16580112,"url":"https://github.com/enesser/alice","last_synced_at":"2025-06-17T03:06:49.018Z","repository":{"id":81646311,"uuid":"41465898","full_name":"enesser/alice","owner":"enesser","description":"Intro to Designing in the Browser: Creating a Web Prototype with Responsive Typography.","archived":false,"fork":false,"pushed_at":"2018-06-17T20:48:19.000Z","size":343,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T23:13:23.716Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enesser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-27T04:36:59.000Z","updated_at":"2024-06-02T03:28:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"e51942c5-9023-477e-9329-d6700a636184","html_url":"https://github.com/enesser/alice","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/enesser/alice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Falice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Falice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Falice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Falice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enesser","download_url":"https://codeload.github.com/enesser/alice/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Falice/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260281569,"owners_count":22985629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T22:23:40.899Z","updated_at":"2025-06-17T03:06:48.994Z","avatar_url":"https://github.com/enesser.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alice\n\nThese files are my course materials for *Intro to Designing in the Browser: Creating a Web Prototype with Responsive Typography* – an interactive presentation I delivered for [Designory](http://www.designory.com) in Chicago, Nashville, and Long Beach in August of 2015.\n\nIn this short course, we transformed blocks of text from Lewis Carrol’s *Alice’s Adventures in Wonderland* into an attractive responsive website by selecting and setting type. We also created a responsive prototype that designers can use to experiment with web fonts before incorporating them into their designs.\n\n![Sample Screenshot](https://cloud.githubusercontent.com/assets/5659221/9574744/4b4938ea-4f8f-11e5-91f7-82de3b3a8d90.png)\n\n\u003e See a demo of what we did on [CodePen](http://codepen.io/enesser/pen/JdgKjX).\n\n**or**\n\n\u003e See a demo of text scaling to the browser on [CodePen](http://codepen.io/enesser/pen/LpPpJy).\n\n## Breakdown of the Course\n\nIn this course, we covered:\n\n* How to add semantic markup for SEO and WCAG.\n\n* How to select and set type from [Google Fonts](https://www.google.com/fonts).\n\n* How *em* units proportionally adjust to base font sizes specified in *pixels (px)*, *points (pt)*, *inches (in)*, *centimeters (cm)*, *millimeters (mm)*, or *picas (pc)*.\n\n* How to [design to scale](#typographic-scale) for pleasing vertical rhythm.\n\n* The [mapping](#mapping-design-terminology-to-css) between designer\nterms and CSS.\n\n* How to use content breakpoints over traditional breakpoints for a responsive layout.\n\n* How to use progressive font loading with [Web Font Loader](https://github.com/typekit/webfontloader) and [ffffallback](http://ffffallback.com/) so that users don't see a blank screen or screen jumping while fonts load (especially on mobile).\n\n* How we might [tease](#mapping-design-terminology-to-css) a typeface with tracking, weight, small caps, ligatures, or other features so that one typeface can serve many purposes.\n\n* A bonus example of [auto-scaling](https://github.com/enesser/alice/tree/master/auto-scale) using *viewport width (vw)* units.\n\n## Getting Started with the Materials\n\nClone the repository from the terminal:\n\n```shell\n$ git clone -o upstream https://github.com/enesser/alice.git MyApp\n$ cd MyApp\n$ npm install -g gulp       # Install Gulp task runner\n$ npm install               # Install dependencies\n$ open index.html           # Open the sample document in your browser (Mac OS)\n```\n\n### Building Assets\n\nRunning ``gulp`` by itself will build the Sass into CSS:\n\n```shell\n$ gulp\n```\n\nRunning ``gulp watch`` will watch for Sass changes in the assets directory and build when files are modified.\n\nIf you’re not comfortable with the terminal, feel free to use the [CodePen](http://codepen.io/enesser/pen/JdgKjX) versions.\n\n## Course Q\u0026A\n\n**Can you control widows and orphans in CSS?**\n\nYes. See the [widows](https://developer.mozilla.org/en-US/docs/Web/CSS/widows) and [orphans](https://developer.mozilla.org/en-US/docs/Web/CSS/orphans) properties on MDN. Feel free to send me what you’re working on if you need help.\n\n**I don’t like how the text wraps around the image. Can you fine tune the margin between the image and text?**\n\nFor ultimate control over how text wraps next to images, there’s [CSS shapes](http://alistapart.com/article/css-shapes-101) which has has a [polyfill](http://codepen.io/adobe/details/3b079a5671f21d140f47ffce3801ddfa/) available for decent browser support. CSS shapes make all kinds of exciting designs possible originally only possible in print or imagery.\n\n**Is there a way you can have CSS replace characters like straight quotes (') with proper curly quotes (‘’)?**\n\nThere is no way to do this in CSS. In my pull quote example, you can see how I automatically insert a curly double quote (“) for the quotation using a psuedo-element so the user doesn’t have to type it.\n\nBut if you want to do a character replacement, there are JavaScript frameworks. Additionally I’ve worked with the API of web word processors like TinyMCE and RadEditor to do character replacement as you type.\n\nAn HTML pre-processor like [Typeset](https://github.com/davidmerfield/typeset) could easily be run from a publish event from most CMS systems.\n\n**What is the difference between tracking and kerning?**\n\nTracking is the overall spacing between letters. Kerning is the offset spacing between certain letter pairs (such as when an ‘f’ appears next to a ‘t’) that have been specifically included in a kerning table in the font.\n\n**Can you show an example of a pull quote?**\n\nA pull quote has been added to the exercise and demos.\n\n**Can you show a sample of text that scales automatically with the browser size?**\n\nI have added this as an example in the ``auto-scale`` folder. You can see a live demo on [CodePen](http://codepen.io/enesser/pen/LpPpJy).\n\n## Typography Shortcuts for Quotation\n\nGood typography uses curly quotes. The straight quotes come to us from the physical constraints of the typewriter and can make typography look industrial.\n\nMark | Description           | Windows     | Mac                | HTML\n---- | --------------------- | ----------- | ------------------ | -----\n'    | straight single quote | '           | '                  | '\n\"    | straight double quote | \"           | \"                  | \"\n‘    | opening single quote  | alt + 0145  | option + ]         | \u0026lsquo;\n’    | closing single quote  | alt + 0146  | option + shift + ] | \u0026rsquo;\n“    | opening double quote  | alt + 0147  | option + [         | \u0026ldquo;\n”    | closing double quote  | alt + 0148  | option + shift + [ | \u0026rdquo;\n\n## Typographic Scale\n\nWe used the [golden ratio](https://en.wikipedia.org/wiki/Golden_ratio) (1:1.618) to establish vertical rhythm in our exercise. You can use something subliminally sexy like a musical scale from a cabaret song for a Las Vegas advertisement.\n\nWhen designing with a scale, trust your eye more than the scale. Remember we scaled content at 80% vs. 60% for article header elements on mobile.\n\nWe used a site called [Modular Scale](http://www.modularscale.com/) to assist us with the scale. There are also [Sass frameworks](https://github.com/modularscale/modularscale-sass) for modular scale.\n\nElement              | Size\n-------------------- | ----------------------------\ntitle                | 4.236em\nauthor               | 2.618em\nsubtitle             | 1.618em\nparagraph leading    | 1.618em\nelement leading      | 0.618em\n\n## Proportional Spacing or Uniform Spacing\n\nRemember that you can switch between proportional spacing and uniform spacing of the heading elements on our page by switching the units in the below code.\n\n```css\n.title,\n.author,\n.subtitle {\n\tdisplay: block;\n    margin: .618em 0;   //proportional\n                        //  - or -\n    margin: .618rem 0;  //uniform\n}\n```\n\n## Mapping Design Terminology to CSS\n\nIn my Sass modules, I always include variables named to align with design terminology at the top to provide easy access to designers.\n\nDesign                     | CSS Property\n-------------------------- | ------------------------------------\nsize of type               | [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)\nweight                     | [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)\ntypeface families          | [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\ntracking                   | [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)\nkerning                    | [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning)\nmeasure                    | [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width)\nleading (between elements) | [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\nleading (inside elements)  | [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)\nwidows                     | [widows](https://developer.mozilla.org/en-US/docs/Web/CSS/widows)\norphans                    | [orphans](https://developer.mozilla.org/en-US/docs/Web/CSS/orphans)\n\n## Additional OpenType Features in CSS\n\nThese additional features can be enabled with OpenType fonts in CSS. Documentation is available from [TypeKit](http://help.typekit.com/customer/portal/articles/1789736-syntax-for-opentype-features-in-css) with illustrations.\n\nDesign                         | CSS Property/HTML Entity\n------------------------------ | ------------------------------------------------\ncommon ligatures               | [font-variant-ligatures: common-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)\ncontextual alternate ligatures | [font-variant-ligatures: contextual](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)\ndiscretionary ligatures        | [font-variant-ligatures: discretionary-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)\nsmall caps                     | [font-variant-caps: small-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)\ncapitals to small caps         | [font-variant-caps: all-small-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)\nswashes                        | [font-feature-settings: 'swsh'](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings)\nstylistic alterate swashes     | [font-feature-settings: 'salt'](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings)\nlining figures                 | [font-variant-numeric: lining-nums](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\noldstyle figures               | [font-variant-numeric: oldstyle-nums](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\nproportional figures           | [font-variant-numeric: proportional-nums](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\ntabular figures                | [font-variant-numeric: tabular-nums](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\nfractions                      | [font-variant-numeric: diagonal-fractions](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\nordinals                       | [font-variant-numeric: ordinal](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)\nnon-breaking space             | \u0026amp;amp;\nnon-breaking hyphen            | \u0026amp;#8209;\n\n## Resources\n\n* [Google Fonts](https://www.google.com/fonts)\n* [Modular Scale](http://www.modularscale.com/)\n* [Sass calculator for modular scale](https://github.com/modularscale/modularscale-sass)\n* [Web Font Loader for progressively loading fonts from Google and TypeKit](https://github.com/typekit/webfontloader)\n* [FFFFallback font fallback bookmarklet tool](http://ffffallback.com/)\n* [Syntax for OpenType features in CSS from Adobe TypeKit](http://help.typekit.com/customer/portal/articles/1789736-syntax-for-opentype-features-in-css)\n* [CSS Shapes article on A List Apart](http://alistapart.com/article/css-shapes-101)\n* [CSS Shapes Polyfill](http://codepen.io/adobe/details/3b079a5671f21d140f47ffce3801ddfa/)\n* [Sass documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)\n* [Contrast Ratio Calculator for WCAG 2.0 compliance by Lea Verou](http://leaverou.github.io/contrast-ratio/)\n* [Val  Head, an inspiration for this exercise](http://valhead.com/)\n\n## Contributions\n\nFeel free to submit questions, comments, or improvements to the exercise files or documentation.\n\n## License\n\n*Alice’s Adventures in Wonderland* is by Lewis Carroll.\n\nThe illustration of Alice is by Sir John Tenniel.\n\nOther content by Eric J Nesser, 2015-2018. MIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesser%2Falice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenesser%2Falice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesser%2Falice/lists"}