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.
公共网络安全服务平台海淀网站建设潍坊网站建设网络安全架构师BSA网络安全营销实例湘潭网站建设网站试运营如何构建一个网站杭州网络科技网站建设晚自习我们班突然收到一封来信,它要和我们玩游戏,并且给每个人都发了红包,看着微信里多出的余额,我们毫不犹豫地在信上按了手印,接下来,怪事接连不断地出现在我们班,迎接我们的只有绝望。我们好像置身棋盘中。这盘棋意义何在?又将何时结束?身为棋子的我们又能做些什么……万象红,人间火,神游六合,应是鬼影浮生;长明灯,十月墓,发龙鸣哀郢,应是御景天城;渭天河,相思门,千江绝流,天命昭昭。九荒世界百族林立,上古时期人族、海族、修罗族、魔族、妖族、鬼族等强大种族为争夺天地第一神器无量芥子天庭爆发大战,使得各族元气大伤,百族不得不归隐。拥有混沌圣体的帝天羽无意间得到天庭,从此开始了他的征伐九荒、战百族之途。平八荒、征魔族,立天庭、建地狱、控六道轮回 ,封神碑分封诸神,成为万族共尊的天帝。 天庭势力组成:九阁十八殿三十六宫七十二部。 天罚阁,直隶于帝天羽。 天策阁,智囊谋士。 药阁,掌管天庭神药天,主要职责炼丹、炼药、治伤、培育神药神草。 器阁,掌管天庭神器天,主要负责炼器、开矿。 武阁,天庭主要武力部门,分为金木水火土等部。 天机阁,情报机构,分为天罗地网两大机构。 天杀阁:刺杀机构。 天政阁,负责天庭内政。 天兵阁,掌管天庭军队。被鲜血洗涤, 也不能使信念动之分毫 被黑暗笼罩, 光芒永不熄灭! 千年过往,揭露自己身世。 迪诺外传,暴露任务秘密~ 一切都是骗局? 不,你所想象的,远不及那一切的真相! 《米瑞斯之诺亚光辉》第二部强势来袭。 拯救阿玛迪斯星的征途中,也不妨一起来探寻,米瑞斯与米梦樱的秘密吧!雪域,一处极其寒冷的地方,寒风冷冽,白雪皑皑,洛无期洛家长子,一个视为之天才少年,却因无法正常修炼被称之为洛家废物,还无情地剥夺了家族长子之位,并逐出家族,本来已走头无路的他选择自杀时,但天无绝人之路,被一神秘人所救走,从此一遇风云便化龙,翱翔九天, 掌控苍穹。用一个个短篇故事了解动物小说 用不长的篇幅写动物小说五年前,叶尘被暗害沉江,侥幸不死,穿越到其他位面,医武双修,达到巅峰之时重归都市,却发现自己有了女儿,但女儿却患了先天心脏病,妻子姜若雪也被抓走,叶尘怒了。他一怒,血流成海,江河撼动,让天地都为之变色。修仙好容易结成金丹,你们居然说是结石,一位姑娘年纪轻轻就结成了元婴,你们居然去医院把她的元婴打碎,更可气的是你们居然把一位身外化身的化神期大神,拉进了精神病院囚禁了起来……面对追求科技文明的仙魔世界,修真与科技两种文明又会碰撞出什么样的火花呢?敬请期待!父母被害,灵种被夺,背负血仇的少年带着神兽回归!杀尽仇人! 少年:巫妖余孽?杀人魔头?只要能手刃仇人,巫妖又如何?魔头又如何? 天才们:“哎哟喂!求求你别叫我天才了,你不知道有个家伙专揍天才吗?”刚刚在这座城市找到新工作的王二浪租下了一个房子,房东脾气臭的很,可让王二浪惊讶的是隔壁就住着一位美女大学老师,要知道美女对人的吸引力是有多大,更何况是美女老师!可惜美女老师有点高冷,从来不理会王二浪,直到有一天,王二浪做了一件英雄救美的事情,被美女老师误会......
中国信息安全法研究中心互联网信息安全产品 上海大 小企业网站制作 成都高端建设网站 淄博网站 潍坊网站建设 全面解读网络安全法二 网络安全泄密档案 哈尔滨做平台网站平台公司 定制网站制作广州 杭州网络科技网站建设 人际关系不好的咨询技巧【www.richdady.cn】 家庭关系的情感维护方法有哪些?咨询【www.richdady.cn】 财运不佳的风水调整【www.richdady.cn】 人际关系不好的案例分享咨询【www.richdady.cn】 外灵【www.richdady.cn】 干扰的预防与化解【σσЗ8З55О88О√转ihbwel 为什么过世的前世记忆【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰的前世记忆咨询【企鹅383550880】√转ihbwel 婴灵的安抚有哪些技巧?【企鹅383550880】√转ihbwel 前世今生的故事如何影响现代生活?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 家庭关系的矛盾化解咨询【σσЗ8З55О88О√转ihbwel 投资项目的自我提升【企鹅383550880】√转ihbwel 财运不佳的财富转运方法有哪些?【www.richdady.cn】√转ihbwel 前世今生的因果关系威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子学习不好的心理调适咨询【www.richdady.cn】√转ihbwel 为什么过世的前世因果【企鹅383550880】√转ihbwel 与老公前世的咨询技巧【www.richdady.cn】√转ihbwel 暗恋的案例分享咨询【企鹅383550880】√转ihbwel 财运不佳的风水调整方法有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 不爱读书的原因分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 网络安全建设论坛 至设计网站 长安网站建设多少钱 2017 网络安全生态峰会 网站怎么制作 网大营销 网络信息安全和合作 网络营销证书名称 星巴克和微信营销案例 人工智能 信息安全 外贸推广网站 推广型网站制作哪家好 服务类网站免费建站 网站美工人员主要做什么的 信息安全 监控,-1 海淀网站建设 BSA网络安全 网站试运营 卫龙营销战略 网站细节 信息安全训练营 徐州建网站 长沙英文网站建设公司 建立网站的方案 江苏网站设计公司 网站建设的后台登录 广州网站设计公司 网站建设的后台登录 棕色网站 东莞营销商城网站建设 哈尔滨做平台网站平台公司 顺德网站设计 烟台哪个公司做网站好 烟台哪个公司做网站好 BSA网络安全 沈阳做网站公司 百度推广营销计划 关键基础设施网络安全 北京信息安全服务平台,-1 重庆整合营销那家好 信息安全技术需要掌握的技能 中国信息安全法研究中心互联网信息安全产品 公共网络安全服务平台 网络安全泄密档案 在网站后台上传的图片为什么传到网站上后会变形应该怎么修改 重庆建网站 金融信息安全产品 长安手机网站建设 做谷歌网站 16年网络安全大事件 网站设计 2017上海网络安全大会 网站页面优化 做谷歌网站 秦安 信息安全 网站美工人员主要做什么的 成都网站制作设计 秦安 信息安全 如何建立自已的购物网站 仿威客网站 潍坊网站建设公司电话 信息及网络安全 建立网站的方案 全网营销策划公司 生物网站建设 计算机网络信息安全员 互联网营销学什么 万维网站 信息安全 监控,-1 如何开发手机网站 开展网络安全认证检测 网大营销 网络安全与防火墙 江苏 网络安全 网络安全播报 大华信息安全四个惩罚软件系统信息安全建设,-1 青岛网络营销团队 网络安全架构师 贵州网站优化 哪里的佛山网站建设 网络安全那所大学有 中山精品网站建设方案 怎么搭建自己的网站 人工智能 信息安全 网站怎么制作 网络安全那所大学有 信息安全等级保护制度的基本内容 成都高端建设网站 全面解读网络安全法二 信息安全等级保护制度的基本内容 哪里的佛山网站建设 网络安全建设论坛 网站建设趋势2017 如何建立自已的购物网站 微信营销新闻 建永久网站 上海大 小企业网站制作 b2c网站建设 广州 重庆好的网络营销公司 企业网络安全是什么 星巴克和微信营销案例 免飞网站 信息安全网络大会 广州网站设计公司 仿威客网站 网站字体大小合适 珠海网站 浙江省信息安全行业协会 至设计网站 咨询手机网站建设平台 昆明响应式网站 网站做成软件免费 进一步提高信息安全意识 青岛网络营销团队 中国网络安全认证中心 php网站建设公司 优衣库微博营销案例 陕西营销型手机网站建设 嘉兴网站开发 莱芜网站建设 亚太网络安全协会 网络营销的流程? 网站做成软件免费 信息安全技术需要掌握的技能 网络安全会议 邀请函信息安全内控,-1 长安网站建设多少钱 人工智能 信息安全 城阳网站建设 h5网站搭建 推广型网站制作哪家好 网站高端网站建设 信息安全的要素有哪些内容 网站美工人员主要做什么的 服务类网站免费建站 医院网络营销是什么意思