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.
深圳网站建设公司招聘电话销售福田建网站网络安全法 金融机构自制公司网站创新的大良网站建设深圳网站开发网络安全结论信息科技有限公司网站建设国家信息安全漏洞共享网站建设公司深圳为了男人的承诺,萧晨强势回归,化身美女总裁的贴身保镖,横扫八方之敌,谱写王者传奇!   他——   登巅峰,掌生死,醒掌天下权,醉卧美人膝! —————— 小舞的微信公众号:寂mo的舞者,可以去关注哦! 小舞的QQ:1589045849,可以去加好友! 唯舞独尊①群:545765633!   一缕天魔残魂为引,带领一个意外来到这个世界的特种兵,走上修仙之路,在魔族圣主的布置下,慢慢走上与仙帝的对抗之路。历经艰险,在生死徘徊之际,觉悟天道有缺,最终战胜天帝,圣主。回归家园。此文为合写文,我是主笔,仝某自称煞笔,印子(废脑修改人)自称彩笔(负责彩蛋和花絮,大部分滑稽片段。) 沙雕版简介 沙雕男主大起大落的鬼畜人生 被一群作者虐的死去活来 被心尖之人伤的遍体鳞伤 这里应有尽有!!(叫卖 正经版简介 男主角出生于一个平凡的小渔村里,且看他是如何慢慢成长,且看他大起大落的人生。一个出身贫寒的人 ,进入警局有多大的用处大乱将至,他只身人间,7年后,一统人间……少年仇深,无常人的快乐和开心,世人都追寻东西却是他的依仗与痛苦的源头。是看破,是坠入深渊,一切由头开始。陆琦的意外人生这是一个纷乱的年代,朝廷只顾扩张版图,谁不服就把他打服,但残暴的统治只会招来无休止的反抗,在饥饿与贫穷交织,瘟疫与压迫并行之下,也不知有多少支义军揭竿而起,为了民族大义,为了平等和自由,抑或只为一口饱饭而战。就在这个民不聊生的年月,天空一声巨响,张钢铁被一种神秘力量送上了场,来不及和自己的时代说再见,来不及温习历史知识,就这么两手空空而来,那么,手无缚鸡之力、襟怀坦白的张钢铁会有怎样的遭遇?被无情的大时代生吞活剥?被冷血的江湖人随意宰割?还是凭借过人的勇气和胆识杀出一条血路? 欢迎点评前三部《张钢铁相亲记》、《张钢铁哄娃记》、《张钢铁撞鬼记》,均已完结。废柴?退婚?绑定作死系统?作死就能变强? 叶天尘:想当年作死的过程多么快乐,可是一晃眼…… 轰隆隆!(仙帝法决袭来) 叶天尘:还是那么快乐! 只要杀不死我,我就能变强 为了逃婚,他随便找了个美女合租,不料她竟是自己未见过面的未婚妻。 为了赚钱,他信手炼制了几枚丹药,不料竟做成了天下第一的医药公司。 为了修行,他顺手收了几个女徒弟,不料她们竟都有着惊世骇俗的身份。 为了救人,他甘愿自废一生之修为,不料所救之人竟是艳绝天下的女帝。 为了复仇,他勤修苦练至大功告成,不料最大的魔头之主竟是……
深圳网站建设公司招聘电话销售 信息安全学院招生,-1 珠海网站策划公司 网站建设公司深圳 网站的承诺 海南网站建设 西安专业建网站 北京微网站建设 永州网站制作 渗透式营销 孩子厌学的家庭教育【www.richdady.cn】 失业的前世记忆咨询【www.richdady.cn】 学习成绩差的咨询技巧咨询【www.richdady.cn】 财运不佳的财富积累咨询【www.richdady.cn】 去世的母亲的咨询技巧【www.richdady.cn】 为什么过世的原因分析咨询【σσЗ8З55О88О√转ihbwel 纠纷的法律援助【企鹅383550880】√转ihbwel 意外的前世记忆【σσЗ8З55О88О√转ihbwel 公司破产的法律咨询咨询【企鹅383550880】√转ihbwel 人际关系不好的前世因果咨询【微:qq383550880 】√转ihbwel 家庭关系的心理调适【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的心理调适咨询【www.richdady.cn】√转ihbwel 财运不佳的改善方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的故事如何改变命运?咨询【微:qq383550880 】√转ihbwel 为什么过世的前世缘分咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 为什么过世的前世案例咨询【www.richdady.cn】√转ihbwel 与公婆前世咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 强迫症的症状与诊断咨询【σσЗ8З55О88О√转ihbwel 婚姻生活不顺的前世因果咨询【σσЗ8З55О88О√转ihbwel 心慌胸闷头晕的解决方法咨询【www.richdady.cn】√转ihbwel 珠海网站策划公司 太原手机网站开发 整合营销案例 网络安全职业 网络营销学习网 南昌的网站推广公司 网络营销的基本形式有哪些 恶意刷网站 银川网络营销 长沙网站推 网络安全检查工具 网站建设心得 中国信息安全委员会 jsp网站地图生成器 网络安全人才需求讲座 朝阳网站建设 网络营销与移动营销 网络安全 资质 青岛设计网站的公司 网络安全包含哪5个网上营销 朝阳网站建设 信息安全审计 深入 探讨 论坛营销的优点 西安专业建网站 海珠区pc端网站建设 信息安全人才培养 手机网站开发技巧 网络安全结论 制学网网站 长沙网站推 成都网站建制作 企业网站的类型 自制公司网站 中国国家信息安全产品 新媒体营销外包公司哪家好 信息安全学院招生,-1 网站建设策划书 网络营销学习网 网站的承诺 网络营销意识 国内信息安全现状分析 珠海网站策划公司 合肥网站制作公司 信息安全事件等级 医院营销推广 论坛营销的优点 深圳网站建设公司招聘电话销售 关于加强网络安全有何意义 上海市网络与信息安全协调小组 宝鸡做网站 flash网站制作教程 免费的企业网站 信息安全业务介绍 营销型b2b网站 东台网站建设 信息安全技术及应用 网站页面设计 成都网站建制作 微博的网络营销 多层次营销 福田建网站 网络安全检查工具 多层次营销 信息安全业务介绍 网络营销的基本形式有哪些 信息安全事件等级 2017网站风格四川大学 网络安全编程 期末试题 营销培训学院招聘 海南网站建设 烟台网站制作 2016网络安全攻击统计 e mail营销的流程 网络营销与移动营销 太原手机网站开发 网络安全法 金融机构 石家庄做网站的公司有哪些 网络安全逆向工程 中国国家信息安全产品 龙岩网站优化 个人做网站 网站迭代 海南网站建设 网络安全 资质 网站设计建设 武汉 具有品牌的广州做网站 北京专业做网站 宝鸡做网站 网络营销专业科类别 上海客服营销外包 整合网络营销 北京专业做网站 北京微网站建设 seo网络营销师 优帮云 信息安全有什么认证 北京微网站建设 浙江省 网络安全 网络安全关乎个人安全 办公网络安全建设 银川网络营销 网站页面设计 网络安全职业 中国信息安全委员会 企业网站的类型 网络安全和人工智能网络安全工作汇报 海珠区pc端网站建设 长沙网站推 营销学评价 成都的信息安全公司 jsp网站地图生成器 网络营销的基本形式有哪些 信息安全咨询服务方案 信息安全工程师 培训 信息安全 人才 网络安全职业 新媒体营销外包公司哪家好 唯品会营销策略分析ppt 南京在线网站制作 病毒营销的策略 如何改变网站首页栏目 企业的网络营销案例分析ppt模板 信息安全学院招生,-1 最好的网站建设公司 病毒营销的策略 godaddy邮箱营销 太原手机网站开发 手机网站开发技巧 godaddy邮箱营销 网络营销公司 优帮云 成都的信息安全公司 西安专业建网站 浙江省 网络安全 2016网络安全攻击统计 网站红蓝色配色分析 永州网站制作 互联网营销语句