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.
网络安全周报道高校网络安全网站图片尺寸番禺做网站国内网络安全问题成都网站建设市场分析网络安全产品培训方案手机网站生成app网关 网络安全防护手段网络营销实训课程设计2017中国网络安全论坛在未来,世界各地突然出现了各类怪物,在它们的袭击下,大多数都市瞬间化为了废墟,残存的人类纷纷聚在一起在世界的各地建立起堡垒与怪物们进行对抗。综武世界 叶青在三不管地带开黑店。 小昭:老板,你心都是黑的,我才不要给你打工一百年! 师妃暄:黑心老板,休要坏我道心! 欧阳锋:年轻人,我劝你耗子尾汁,莫要将路走窄了。 赵敏:老板,你说那腹黑成功学,教教我,好刺激哦,我好喜欢。 张三丰:年轻人不讲武德,不过,你要不要跟我学修仙? 郭靖:叶大哥,以后我就跟你混了,你说让我干啥就干啥! ...... 叶青笑的五彩斑斓黑:诸位,本店明码标价,童叟无欺。从古至今,从来都是顺天应人,我林阳偏偏要做那那逆者……赫赫有名的“白金”成就满级玩家,在删除账号却误入了新的时间,本以为是系统BUG,没想到却在这里开启了新的人生这是一部浸透着战火硝烟的热血之作。民夫吴顶牛的无心之举,让两辆日军坦克陷入死地。二十九军某部连长任广正,正打算消灭来犯之敌,却接到帮日军推坦克的荒唐命令。坦克事件,成为任广正、邢百里和吴顶牛多年恩怨的导火线。 家国沦亡,吴顶牛和任广正先后加入到邢百里成立的救国军中去。救国军是一支最不被看好的弱小武装。吴顶牛的奇招怪招,任广正的奋勇厮杀,让救国军一步步走向辉煌的胜利。胜利带来的却是内部的分裂和敌视。任广正暗杀吴顶牛未遂,于是率部分裂叛逃,投奔国军。吴顶牛和救国军则接受了八路军的改编 1943年,新海惨案发生,黄骅被杀,谁是幕后真凶讲述关于一个被捡来的孩子周游世界结识许多伙伴并成为世界最强的魔法士的故事高考结束了,摆烂但又不想接受这样的自己,阴差阳错回到两年前人间的无常,俊俏的神灵。 世间律法不及之处,人间黑暗遍布的深渊。 不要唾弃世间的不公,我就是人间最公平的判罚者 作者是个很忙,又很闲的人,觉得实在无聊跑来写书,回忆回忆自己的初中生活,重新倘徉一下自己不知所云的青春,大家随意,学生文笔,请见谅 穿越到《特种兵三》世界,得到签到系统辅助。 他是当之无愧的影帝,特种兵、飞行员、坦克兵,化妆渗透全靠演,在每一个兵种都做到了极致。 签到三年,他成为全球特战兵王。 雷战:“哎……这小子又把坦克飞机给玩坏了,咱们火凤凰赔不起了。” 阎王:“那怎么办?” 雷战:“去,给我掐死这小子。”
衡水网站建设供应商 中国信息安全中心评级 阿里云 信息安全 新手可以自己建网站吗 网络安全 soc 2017中国网络安全论坛 无锡网站建设原则 饮料创意营销策略 中国信息安全测评中心怎么样 重庆企业网站建站 孩子不爱读书的应对策略【www.richdady.cn】 家庭关系的问题分析【www.richdady.cn】 学习成绩差的原因分析【www.richdady.cn】 灵魂种子治疗咨询【www.richdady.cn】 感情纠纷的情感疏导【www.richdady.cn】 与公婆前世的前世修行【企鹅383550880】√转ihbwel 什么原因意外的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 头脑混沌的案例分享【σσЗ8З55О88О√转ihbwel 婴灵的超度与慈悲心咨询【企鹅383550880】√转ihbwel 儿子抑郁症的康复训练【σσЗ8З55О88О√转ihbwel 缺心眼【σσЗ8З55О88О√转ihbwel 强迫症的家庭支持咨询【www.richdady.cn】√转ihbwel 家庭中常见的意外事故原因【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与男友前世的前世解析咨询【企鹅383550880】√转ihbwel 外灵干扰的真实案例分析【企鹅383550880】√转ihbwel 如何避免无形干扰因素【微:qq383550880 】√转ihbwel 精神不振的心理调适威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 人际关系不好的解决方法咨询【σσЗ8З55О88О√转ihbwel 儿子不读书咨询【www.richdady.cn】√转ihbwel 前世老婆咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 网络安全是什么 网络安全控制 建企业网站行业网 东营设计网站建设 第三方人员 信息安全 信息安全实训总结营销项目的推广技巧 口碑会员营销经典案例 万网站建设 佛山h5网站公司 营销型手机网站 借势营销案例 宣传类网站 网络安全 bbs 不同网络营销环境 浙江网站建设企业 2016年网络安全政策 优秀的营销策划方案 上市设计公司网站 网站建设空间申请 武汉做网站公司 外贸网络营销考题 计算机网络安全不能通过以下 2017网络安全奖学金 优秀的营销策划方案 阿里云 信息安全 公司信息安全管理办法 中国电子学会信息安全专家委员会 亚马逊网站的营销策略 高校网络安全 北京网站制作 做网站公 在网站中添加百度地图 网络营销系统的建设 无线网络安全设置加密算法 大数据网络安全专业 风险评估 信息安全 大中华区信息安全经理 网站制作呼和浩特 网关 网络安全防护手段 网站组成 网络安全主要威胁 网络安全事件处理案例 新手可以自己建网站吗 创建网站公司 徐州 网络营销研究的范畴 网站推广营销 2017中国网络安全年会 互联网整合营销传播 网络安全周报道 网络安全协议与标准 武汉做网站公司 无线网络安全设置加密算法 东营设计网站建设 信誉好的龙岗网站设计 计算机网络安全实验教程 微信网站模板 问答营销的营销 思路 建企业网站行业网 互联网公司 信息安全,-1 网络安全主要威胁 php网站设计 瑞昌网站建设 不同网络营销环境 公司手机网站设计 网站推广网 什么是020营销模式 中国电子学会信息安全专家委员会 唐山网站建设报价 专业网站设计哪家好 网站架设 网站建设费用 网络安全标识 信息安全认证体系,-1 川大 信息安全竞赛 目前个人网民的网络安全状况(结合2013年统计报告说明) 顺义石家庄网站建设 网络安全主要威胁 中国信息产业商会信息安全产业分会 在网站中添加百度地图 深圳 信息安全公司 重庆企业网站建站 免费网站模板下载 宣传类网站 html 5+css 3网页设计与网站布局 从新手到高手 网络安全 推荐 对信息安全技术的理解 借势营销案例 网站建设排版页面 东营设计网站建设 网站设计公司 长沙 建企业网站行业网 信息安全认证体系,-1 问答营销的营销 思路 东营设计网站建设 中国 国家安全局 网络安全 郑州网站设计 网站信息安全测试方法 中国 国家安全局 网络安全 某大学校园网络安全解决方案 信息安全意识培育研究 上海平台网站建设公司 营销类的公众号名称 网络安全 bbs 风险评估 信息安全 微信网站模板 网络营销研究调查问卷 百度知识营销是什么 网站组成 一个优秀的网站 佛山h5网站公司 大连营销策划 优帮云 创建网站公司 徐州 唐山网站建设报价 上海口碑营销公司 网络营销系统的建设 国家网络安全 物联网 12306信息安全事件 制作校园网站 长春作网站 营销型手机网站 天津交通信息安全网 2017网络安全奖学金 万网站建设 淘宝服装店营销策划 怎么维护社交网络安全 江西神州信息安全评估中心 网页设计的交流网站 网络安全教程2015 自己创网站 网页设计的交流网站 营销型手机网站 病毒性营销视频 杭州的网络安全公司 某大学校园网络安全解决方案 中国信息安全测评中心怎么样