具体.css

具体.css
Concrete.css

Concrete 是一种简约且简单的 CSS 样式表，易于使用且简单。由于其无类性以及与 Normalize.CSS 的兼容性，它可以作为任何简单网站的优秀基础。当与具有相同功能的用户操作系统配合使用时，该设计具有暗模式功能。其排版组件确保标题、链接、小文本、粗体文本、下划线和强调文本等所有元素的清晰度和一致性。章节分隔、隔离标题以及将特定内容区域居中都可以通过指定元素轻松集成。按钮可通过选项进行自定义，包括其状态（启用或禁用）、布局（类似链接或类似表单输入）和类型（输入或常规）。图像无缝地融入框架中，而列表则使用方块来表示无序项目或使用数字来表示有序项目。表单输入包括名字、姓氏、操作系统选择和可选注释的字段。进度条功能添加了交互式组件，其中包括断线等功能。使用混凝土的场地示例展示了其多功能性。值得注意的是，repfl.ch 和 louismerl.in 清楚地演示了如何最好地利用 Concrete 所体现的设计方法提供的功能。

没有下拉箭头指示符的元素是 UI 设计中的常见做法，特别是随着汉堡菜单的出现，它会隐藏菜单，直到单击为止，显示一个三行图标以指示存在隐藏的菜单选项。然而，如果下拉组件呈现明显的下拉列表而没有任何视觉指示，则可能会导致混乱或误导行为，如果用户无法立即识别其功能，则会导致用户感到沮丧。因此，提供视觉提示，例如下拉箭头或附近的指示标签，可以极大地提高设计的清晰度和可用性。

A simple and to the point classless CSS stylesheet

What is this ?

This is a classless CSS stylesheet, built for lightness and simplicity.

Concrete can be a great starting point for a simple website.

It also switches to a dark theme if your OS uses one.

Best used in pair with normalize.css.

Inspired by Milligram and Skeleton.

Get Started

In your HTML


Just drop these lines into your HTML head.
 rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css">
 rel="stylesheet" href="https://unpkg.com/[email protected]/concrete.css">
In your javascript project
Add the dependencies:
npm install normalize.css concrete.css
Import them somewhere in your code:
import 'normalize.css'
import 'concrete.css'



Typography
Concrete does not redefine headings, although normalize does. This is what you can expect:



h2 heading
h3 heading
h4 heading
h5 heading
h6 heading


I can simply be a paragraph.
I can be a link.
I can be bold.
I can be underlined.
I can be emphasised.
I can be small.


h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading


  I can simply be a paragraph.


  I can be  href="./">a link.


  I can be bold.


  I can be underlined.


  I can be emphasised.


  I can be small.



Sections

For structuring your page, you can use the 
 element inside of the body.
It will be automatically centered on the page, with a maximum width of 640px, like the page you are reading right now.


To isolate the title of your page, and make it bigger, you can use the 
 element.
You can see an example at the top of this page.


You can use the 
 element to separate between the different sections.
The section will simply be given some bottom padding.


The 
 element will center the text inside of it.
You can see an example at the bottom of this page.



  
    
      Title
    
  

  
    
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
  

  
    
      Thank you for reading !
    
  




Buttons




 href="./">



 type="submit" value="an input submit button" />
 type="submit" disabled value="a disabled input submit button" />


Images
Simply add an image element, and voilà !

 src="https://picsum.photos/640/480?grayscale" />


Lists
The concrete list is simply marked by a square.

Unordered element 1
Unordered element 2


Ordered element 1
Ordered element 2


Description term
Description detail


  Unordered element 1
  Unordered element 2



  Ordered element 1
  Ordered element 2



  Description term
  Description detail



Forms


  
    Please enter your information

     for="firstname">First Name
     type="text" name="firstname" id="firstname">

     for="lastname">Last Name
     type="text" name="lastname" id="lastname">

     for="os">Operating System
    

     for="comment">Comment
     <span class="na">name=</span><span class="s">"comment"</span> <span class="na">id=</span><span class="s">"comment"</span> <span class="na">placeholder=</span><span class="s">"Please leave a comment..."</span><span class="nt">></span>

     type="submit" value="Send">

  



Tables



Name
Year
Size
Comment




Skeleton
2011
5.7kB
Awesome


Milligram
2015
8.3kB
Amazing




  
    
      Name
      Year
      Size
      Comment
    
  
  
    
      Skeleton
      2011
      5.7kB
      Awesome
    
    
      Milligram
      2015
      8.3kB
      Amazing
    
  



Blockquotes

"I'm quoting myself" - Louis Merlin


  "I'm quoting myself" - Louis Merlin



Progress Bar
40%
 value="40" max="100">40%


Break line

 />


Sites using Concrete





Made with ♥ by Louis Merlin

具体.css
Concrete.css

What is this ?

Get Started

In your HTML

In your javascript project

Typography

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

`h2 heading`
`h3 heading`
`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h3 heading`
`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

Sections

Buttons

Images

Lists

Forms

Tables

Blockquotes

Progress Bar

Break line

Sites using Concrete

具体.css Concrete.css

What is this ?

Get Started

In your HTML

In your javascript project

Typography

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

h2 heading h3 heading h4 heading h5 heading h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.

h3 heading h4 heading h5 heading h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.

h4 heading h5 heading h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.

h5 heading h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.

h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.

Sections

Buttons

Images

Lists

Forms

Tables

Blockquotes

Progress Bar

Break line

Sites using Concrete

具体.css
Concrete.css

`h2 heading`
`h3 heading`
`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h3 heading`
`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h4 heading`
`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h5 heading`
`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`

`h6 heading I can simply be a paragraph. I can be href="./">a link. I can be bold. I can be underlined. I can be emphasised. I can be small.`