A typography stylesheet for readable content

Related tags

CSS yue.css
Overview

yue.css

yue.css is a typography stylesheet for readable content. It was created for my blog at first since I always designed a new theme for my blog. But later it becomes the offical stylesheet for yuehu site.

yue.css is not a reset stylesheet.

It is designed for article content, and only article content. If you are looking for a reset css, you are watching the wrong repository.

Installation

Install with npm:

$ npm install yue.css

However, if you don't fancy npm, you can just grab the css file from GitHub. There is no dependency of this project.

API

For readable content, wrapper them under the .yue class, and everything would be ok now:

<div class="yue">
    <h1>Heading</h1>
    <p>Paragraph of contents...</p>
</div>

Tags

yue.css only supports selected tags which are commonly used in an article.

Tag Name Description
h1 - h6 headings for title
p paragraph
a anchor links
strong b emphasis in bold style
em i emphasis in italic style
img image
figure figure wrapper for images
figcaption figcaption in figure
hr separator
blockquote style for quotes
ul ol li ordered and unordered list
pre code block
code tt inline code
table .. tables (not well designed)
iframe embed iframe style

Headings

Headings are tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. But the most commonly used tags are <h1>, <h2>, and <h3>.

Emphasis

Emphasis works on something important or valuable. <b> and <i> are not designed for this purpose, you should always use <strong> and <em>.

Links & Images

Links are the soul of internet. Fork it on GitHub.

art of human body

Images can be wrappered in a <figure> tag:

art of human body

List

There is ordered list <ol> and unordered list <ul>.

  • Unordered list is tagged in <ul>
  • Another item of unordered list
    1. An ordered list in un ordered list
    2. Another ordered item
  • Unordered list can has unordered list children
    • Item of the children
    • Another item of the children
  1. Ordered list is tagged in <ol>
  2. Each item is tagged in <li>

Note

yue.css has no target language, however it looks great in both English and Chinese.

yue.css 并不是为某一特定语言设计的，但是它确实在英文和中文上表现出色。

License

MIT.

Comments
  • Code styles aren't used in Typlog because `code` and `tt` aren't direct children of `p`

    Code styles aren't used in Typlog because `code` and `tt` aren't direct children of `p`

    https://github.com/typlog/yue.css/blob/76f4cca3898c206fd2e0fcda7431ffecc959046e/src/yue.css#L143-L152

    That isn't really a yue.css problem, but maybe it's unexpected. And maybe it implies that this is over-specified?

    opened by michaellenaghan 4
  • 当 width > 1100px 时，blockquote 嵌套时会出现 BUG

    当 width > 1100px 时，blockquote 嵌套时会出现 BUG

    当 width > 1100px 时，blockquote 出现嵌套时，子 blockquote 缩进不正常

    BUG重现 http://cdpn.io/roizd

    当 width < 1100px 的时候不会出现此 BUG

    问题代码应该是这段，应该如何优化它？

    .yue blockquote {
    margin-left: -24px;
    padding-left: 20px;
    border-width: 4px;
  }
    opened by linkgod 4
  • Change your images on the readme.

    Change your images on the readme.

    Change your images on your readme to something more appropriate or remove entirely.

    Reason being your images are not appropriate for a work/corporate environment.

    I don't mind the images but come'on why nude images on your project!

    opened by CodyReeves 1
  • Less版本：A less version of yue.css

    Less版本：A less version of yue.css

    嗨，我Fork了你的代码弄了一个less的版本，并在你的基础上增加了.du类名，添加了.du类名后，h2~h4标题前面会自动带上序号，因为less版本就不做pull request了。

    less版本： http://github.com/uexim/yue.less.git

    .du类名自动h2~h4标题序号示例： https://cdn.rawgit.com/uexim/yue.less/master/index.html?du

    opened by mamboer 1
  • Inconsistent space around headings

    Inconsistent space around headings

    I think there's an issue here:

    https://github.com/typlog/yue.css/blob/76f4cca3898c206fd2e0fcda7431ffecc959046e/src/yue.css#L29-L30

    Note the progression of top and bottom margins:

    .yue h2 {
  ...
  margin-top: 1.42em;
  margin-bottom: 0.4em;
}

.yue h3 {
  ...
  margin-top: 1.62em;
  margin-bottom: 1em;
}

.yue h4,
.yue h5,
.yue h6 {
  ...
  margin-top: 1.4em;
  margin-bottom: 0.8em;
}

    h3s margins are larger than both h2s and h4/h5/h6s.

    opened by michaellenaghan 0
Owner
Typlog
Typlog
GitHub http://lab.lepture.com/yue.css/
Bootstrap-print-css - Print Stylesheet for Bootstrap 5

Bootstrap Print CSS ??️ Bootstrap 5 no longer includes custom CSS for printing - with the CSS in this project you can add it back. Note: This should i

Christian Oliff 35 Dec 13, 2022
This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents.

jupyter-dragonfruit-theme This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents. Author Website Conta

Allen Chang 1 Jan 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Web typography at its finest: font-size and line-height based on element width.

FlowType.JS Responsive web typography at its finest: font-size and line-height based on element width. Check out the demo site. What does FlowType.JS

Simple Focus 4.6k Dec 30, 2022
A lightweight, easy to use Javascript injector for radical Web Typography

Lettering.js, a jQuery plugin for radical Web Typography We developed a lightweight, easy to use Javascript span injector for radical Web Typography,

Dave Rupert 5.4k Dec 20, 2022
Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Priya Chakraborty 0 Jan 29, 2022
Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Oliver Benns 10 Dec 28, 2022
Less. The dynamic stylesheet language.

Chat with Less.js users and contributors This is the Less.js monorepo, managed via Lerna. More information For general information on the language, co

Less 16.9k Jan 4, 2023
Reasonable System for CSS Stylesheet Structure

Viewing this from GitHub? Visit the website for the full experience. rscss.io → rscss Styling CSS without losing your sanity Reasonable System for CSS

Rico Sta. Cruz 3.9k Dec 21, 2022
Fully typed hooks and utility functions for the React Native StyleSheet API

react-native-style-utilities Fully typed hooks and utility functions for the React Native StyleSheet API npm i react-native-style-utilities ESLint Set

Marc Rousavy 73 Dec 17, 2022
Bootstrap-print-css - Print Stylesheet for Bootstrap 5

Bootstrap Print CSS ??️ Bootstrap 5 no longer includes custom CSS for printing - with the CSS in this project you can add it back. Note: This should i

Christian Oliff 35 Dec 13, 2022
This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents.

jupyter-dragonfruit-theme This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents. Author Website Conta

Allen Chang 1 Jan 29, 2022
Stylesheet and scripts for implementing dark mode with Bootstrap 4

Bootstrap Darkmode This project provides a stylesheet and two scripts that allow you to implement a dark theme on your website. It is initially loaded

Adrian Kunz 41 Nov 27, 2022
CSS-based animations triggered by JS, defined in your stylesheet

Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is

LTBL 2 Sep 29, 2021
A CSS stylesheet to quickly highlight a11y concerns.

Checka11y.css A CSS stylesheet to quickly highlight a11y concerns. Lightweight • Modern • Accessibile • Customisable • Simple The first line of defenc

Jack Domleo 428 Dec 25, 2022
Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! ?? If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Tromgy 9 Aug 4, 2022
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
Turn your ES5 code into readable ES6. Lebab does the opposite of what Babel does.

Lebab Lebab transpiles your ES5 code to ES6/ES7. It does exactly the opposite of what Babel does. If you want to understand what Lebab exactly does, t

Lebab 5.5k Dec 31, 2022