Typographic scale

The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Emphasis, address, and abbreviation

Element Usage Optional
<strong> For emphasizing a snippet of text with important None
<em> For emphasizing a snippet of text with stress None
<abbr> Wraps abbreviations and acronyms to show the expanded version on hover

Include optional title attribute for expanded text

Use .initialism class for uppercase abbreviations.
<address> For contact information for its nearest ancestor or the entire body of work Preserve formatting by ending all lines with <br>

Using emphasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example addresses

Here are two examples of how the <address> tag can be used:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

Blockquotes

Element Usage Optional
<blockquote> Block-level element for quoting content from another source

Add cite attribute for source URL

Use .pull-left and .pull-right classes for floated options
<small> Optional element for adding a user-facing citation, typically an author with title of work Place the <cite> around the title or name of source

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Include an optional <small> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous</small>
</blockquote>

Example blockquotes

Default blockquotes are styled as such:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Lists

Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Description

<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description

<dl class="dl-horizontal">

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
西安做网站信息安全发展过程企业网站建设目的网站 手机案例信息安全应急响应中心江西网站设计团队重庆 网络信息安全,-1信息安全服务认证中心营销新媒体关于网络安全的文献在不久的将来,地球上武侠风鹊起,在平静繁荣的社会表象下,实则暗流涌动。随着某些势力的实力和科技的日渐成熟,很多在暗处的庞然大物也渐渐浮出水面,搅起风云变动。超出所有人想象的事物的出现,打开了另一扇世界的大门!游轮失事,一觉醒来发现自己身处荒岛之上,身边相伴的却是朝思暮想的豪门千金…… 荒岛之上,和女神一起打造我的世界!高三少年竟是人类决胜的关键! 边界外的怪物入侵人类的家园,捍卫人类的神秘组织。 少年,这是你的命运,逃不掉的重担。 只有你勇敢面对他时,你才会明白何谓真正的强大。   未来人们生活在一颗名为地球的星云,这里等级分明,机械师掌控这一切全球异变,每个人都有属于自己的武魂,除了宁凡。 “废掉武魂跟我学修仙吧,修仙更有前途。”宁凡真诚的看着众人。 同学:“老师,宁凡疯了!送医院吧。” 爸爸:“我的好大儿,爹不嫌弃你没武魂,但是你别疯啊!” 陌生人:“喂?精神病院吗?你家病人跑出来了,赶紧来接回去。” 狗:“汪汪汪~”妖魔乱世,鬼怪猖獗,大离皇朝动荡不安。 张韬一觉醒来,发现自己成为一名命不保夕的捉妖人。 妖魔图鉴,万物可辨。 凡是入手经过的妖魔鬼怪,都是不可多得的财富! 张韬惊喜发现,他竟然可以通过点亮妖魔图鉴,获取各种奖励... 阴冥之眼,九幽之瞳,换头术,赤霄真经,御神宝决,浮屠魔塔,九碑妖石,法相天地,长生不灭......龚超怀揣着对军校的向往,如愿以偿来到黄楠省乘商市这所全国著名军队院校。下了火车站在乘商火车站,面对与想象之中完全不同的“接新”模式,龚超既期盼又忐忑地坐上校车到达了校区三号院。在这里,龚超将要度过他四年的军校生涯。四年间,他经历过、退缩过、坚毅过、成长过……让我们跟随男主人公的切身经历,品读这不同寻常的军旅生涯。道武成仙,道法成神。 这是一个万道齐兴的世界,精彩绝伦的道法神通,拳破山河的武师战者,口诛笔伐的文人墨客,演绎诸天的术数天师…… 平平凡凡的少年意外来到这样一个世界,他这一生注定不会平凡…… 不参与故事的发展,只为了记述历史。不登上角色的舞台,只为了台下观看。不在聚光灯下亮相,只为了幕后记录。一个被遗弃少年的奇幻冒险
信息安全(四) 科研创新问题 营销培训证书 太原网站推广 网络安全应该怎样做 营销导向 中国中央网络安全和信息化领导小组办公室 佛山网站建设的首选 新浪微博内容营销 网络安全周推送 网站建设服务商 与男友前世的影响分析咨询【www.richdady.cn】 婴灵的真实案例有哪些?【www.richdady.cn】 亲子关系中的沟通艺术有哪些?咨询【www.richdady.cn】 与男友前世的因果关系【www.richdady.cn】 灵魂治疗与心理辅导咨询【www.richdady.cn】 前世缘份如何影响今生?【企鹅383550880】√转ihbwel 耳鸣的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel “缺心眼”对人际交往的影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子压力大的教育建议威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的缘分再续【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 内心恐惧胆怯的心理调适咨询【企鹅383550880】√转ihbwel 与男友前世的前世案例【www.richdady.cn】√转ihbwel 大龄剩女的婚恋心态【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份如何影响今生?【微:qq383550880 】√转ihbwel 自闭症的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵的常见案例【微:qq383550880 】√转ihbwel 家宅磁场的检测工具【σσЗ8З55О88О√转ihbwel 亲子关系改善建议咨询【微:qq383550880 】√转ihbwel 儿子抑郁症的心理调适【σσЗ8З55О88О√转ihbwel 精神不振的前世因果【www.richdady.cn】√转ihbwel 网络营销课程感想 网上营销 广撒网营销 金融 信息安全体系建设方案,-1 西安做网站 网络安全需要破除 公司信息安全管理 公司信息安全管理 营销导向 信息安全 产业 网络营销推广怎么做 手机网络营销普遍问题 选手机网站 网络营销的定价方法对传统营销的定价方法都进行了进化对么 云南网站设计 网络营销发展课 南阳手机网站建设 信息安全技术 信息安全风险评估规范 佛山网站建设的首选 营销推进存在的问题 营销推进存在的问题 东莞做网站第二代网络安全立法 网络安全举办了几届 网络安全预警中心 VPN与网络安全 网络安全入侵检测 哈尔滨的网站设计 小米网上营销策划书 西安做网站 建和做网站 百度搜索营销 email营销的含义 信息安全管理制度建设 泰安网站建设公司 信息安全保护技术措施 张家港早晨网站建设 主机 信息安全风险评估报告 网站维护机构 网络信息安全备案表 贵阳开发网站建设 空间网络安全研讨会 营销模式摘要 php大型网站设计 网上营销 信息网络安全 司法解释 微信公众号关注营销案例 江西网站设计团队 成都 企业网站建设公司 邮件营销模板简约 佛山微信营销 新浪微博内容营销 金融 信息安全体系建设方案,-1 营销导向 企业网站建站意义 网络信息安全防护等级 信息安全技术终端计算机系统安全等级技术要求 网络安全实验室综合关 苏州市网络安全 保定 网站建设 关于网络安全的资料南京网站制作哪家专业 网络营销与马云 选手机网站 学校网站开发网络信息安全测评机构 河北网站制作 公司信息安全管理 营销品牌 舆情 整合营销 代理 网络营销推广怎么做 网站建设服务商 专门学网络营销的app 网络营销的风险因素 商务营销 营销推广全网整合营销 网络安全法征文 casb 网络安全 南京专业微信营销公司有哪些 达内培训 网络营销课程 你自己的计算机上网遭受网络安全威胁时你是怎么做的? 网站专业销售团队介绍 国家信息安全工程研究中心 网络营销推广怎么做 网站外接 外贸网站建设 如何做 e春秋网络安全实验室 工控信息安全 介绍 邮件营销模板简约 网络安全需知 临沂网站 选手机网站 工控信息安全 介绍 网络营销的定价方法对传统营销的定价方法都进行了进化对么 成都网站设计制作工作室 能源行业信息安全 信息安全技术终端计算机系统安全等级技术要求 网络安全周推送 网络安全期刊 你自己的计算机上网遭受网络安全威胁时你是怎么做的? 网络营销的风险因素 信息网络安全 司法解释 pci 信息安全 营销九连环 php大型网站设计 做网站一般用什么语言 网络安全是 外贸网站建设 如何做 营销九连环 商务营销 建个普通网站 网络营销资源论坛 商务营销 网上营销 营销模式摘要 网络营销的定价方法对传统营销的定价方法都进行了进化对么 网络安全应该怎样做 网络营销与马云 网站费用 营销品牌 舆情 国家信息安全工程研究中心 北京网站建设第一品牌 佛山微信营销 银监对信息安全的要求 QQ转发营销活动 网站建设服务商 领袖型营销 VPN与网络安全 临沂网站 成立网络安全工作领导小组办公室 营销导向 信丰做网站 网络安全问题管理 信息安全管理制度建设 东莞做网站第二代网络安全立法 江西网站设计团队 网络营销发展课 网站有哪些分类