concrete.css

2024-02-07 22:04:33

A easy and to the purpose classless CSS stylesheet

What is that this ?

This can be a classless CSS stylesheet, constructed for lightness and ease.

Concrete generally is a nice start line for a easy web site.

It additionally switches to a darkish theme in case your OS makes use of one.

Greatest utilized in pair with normalize.css.

Impressed by Milligram and Skeleton.

Get Began

In your HTML `<head>`

Simply drop these strains into your HTML head.

<hyperlink rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css">
<hyperlink rel="stylesheet" href="https://unpkg.com/[email protected]/concrete.css">

In your javascript challenge

Add the dependencies:

npm set up normalize.css concrete.css

Import them someplace in your code:

import 'normalize.css'
import 'concrete.css'

Typography

Concrete doesn’t redefine headings, though normalize does. That is what you may count on:

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

I can merely be a paragraph.

I may be a link.

I may be daring.

I may be underlined.

I may be emphasised.

I may be small.

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

<p>
  I can merely be a paragraph.
</p>
<p>
  I may be <a href="https://concrete.fashion/./">a hyperlink</a>.
</p>
<p>
  I may be <robust>daring</robust>.
</p>
<p>
  I may be <u>underlined</u>.
</p>
<p>
  I may be <em>emphasised</em>.
</p>
<p>
  I may be <small>small</small>.
</p>

Sections

For structuring your web page, you should use the <foremost> aspect inside the physique.
Will probably be mechanically centered on the web page, with a most width of 640px, just like the web page you might be studying proper now.

To isolate the title of your web page, and make it greater, you should use the <header> aspect.
You’ll be able to see an instance on the high of this web page.

You should utilize the <part> aspect to separate between the completely different sections.
The part will merely be given some backside padding.

The <footer> aspect will heart the textual content inside it.
You’ll be able to see an instance on the backside of this web page.

<foremost>

  <header>
    <h1>
      Title
    </h1>
  </header>

  <part>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </part>

  <footer>
    <p>
      Thanks for studying !
    </p>
  </footer>

</foremost>

Buttons

<a href="https://concrete.fashion/./"><button>a hyperlink button</button></a>
<a href="https://concrete.fashion/./"><button disabled>a disabled hyperlink button</button></a>

<button>a button</button>
<button disabled>a disabled button</button>

<enter kind="submit" worth="an enter submit button" />
<enter kind="submit" disabled worth="a disabled enter submit button" />

Photos

Merely add a picture aspect, and voilà !

<img src="https://blinkingrobots.com/wp-content/uploads/2024/02/concretecss.jpeg" />

Lists

The concrete listing is just marked by a sq..

Unordered aspect 1
Unordered aspect 2

Ordered aspect 1
Ordered aspect 2

Description time period: Description element

<ul>
  <li>Unordered aspect 1</li>
  <li>Unordered aspect 2</li>
</ul>

<ol>
  <li>Ordered aspect 1</li>
  <li>Ordered aspect 2</li>
</ol>

<dl>
  <dt>Description time period</dt>
  <dd>Description element</dd>
</dl>

Kinds

<kind>
  <fieldset>
    <legend>Please enter your data</legend>

    <label for="firstname">First Title</label>
    <enter kind="textual content" identify="firstname" id="firstname">

    <label for="lastname">Final Title</label>
    <enter kind="textual content" identify="lastname" id="lastname">

    <label for="os">Working System</label>
    <choose identify="os" id="os">
      <choice worth="GNU/Linux">GNU/Linux</choice>
      <choice worth="MacOS">MacOS</choice>
      <choice worth="Home windows">Home windows</choice>
      <choice worth="Different">Different</choice>
    </choose>

    <label for="remark">Remark</label>
    <textarea identify="remark" id="remark" placeholder="Please depart a remark..."></textarea>

    <enter kind="submit" worth="Ship">

  </fieldset>
</kind>

Tables

Title	12 months	Dimension	Remark
Skeleton	2011	5.7kB	Superior
Milligram	2015	8.3kB	Wonderful

<desk>
  <thead>
    <tr>
      <th>Title</th>
      <th>12 months</th>
      <th>Dimension</th>
      <th>Remark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Skeleton</td>
      <td>2011</td>
      <td>5.7kB</td>
      <td>Superior</td>
    </tr>
    <tr>
      <td>Milligram</td>
      <td>2015</td>
      <td>8.3kB</td>
      <td>Wonderful</td>
    </tr>
  </tbody>
</desk>

Blockquotes

“I am quoting myself” – Louis Merlin

<blockquote>
  "I am quoting myself" - <em>Louis Merlin</em>
</blockquote>

Progress Bar

40%

<progress worth="40" max="100">40%</progress>

Break line

<hr />

Websites utilizing Concrete

Source Link

What's Your Reaction?

Excited

Happy

In Love

Not Sure

Silly