diff --git a/.gitignore b/.gitignore index 3da262a..4b5886c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,64 +1,15 @@ # Logs logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release +*.log* # Dependency directories node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ # Optional npm cache directory .npm -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - # Output of 'npm pack' *.tgz -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - -# next.js build output -.next - -# jekyll build -_site +# NPM package lock +package-lock.json \ No newline at end of file diff --git a/LICENSE b/LICENSE index 89e4637..623c3f2 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019 Louis Merlin +Copyright (c) Louis Merlin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 7e1fe08..b16ac18 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # [concrete.css](https://concrete.style) -> A simple and to the point CSS microframework +> A simple and to the point classless CSS stylesheet [![](https://img.shields.io/npm/v/concrete.css.svg)](https://www.npmjs.com/package/concrete.css) [![](https://img.shields.io/bundlephobia/minzip/concrete.css.svg)](https://bundlephobia.com/result?p=concrete.css) @@ -8,14 +8,12 @@ ## What is this ? -This a CSS microframework, built for lighness and simplicity. +This 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](https://necolas.github.io/normalize.css/). - Inspired by [Milligram](https://milligram.io/) and [Skeleton](http://getskeleton.com/). #### Please feel free to open an issue and/or contribute ! @@ -23,19 +21,24 @@ Inspired by [Milligram](https://milligram.io/) and [Skeleton](http://getskeleton ## Get Started ### In your HTML `` -Just drop these lines into your html ``: +Just drop this line into your html ``: ``` - - + ``` ### In your javascript project -Add the dependencies: +Add the dependency: ``` -yarn add normalize.css concrete.css +npm install concrete.css ``` -Import them somewhere in your code: +Import it somewhere in your code: ``` -import 'normalize.css' import 'concrete.css' ``` + +## Related projects + +These repositories are forks of `concrete.css`, or were heavily inspired by it: + +- [indie.css](https://github.com/chr15m/indie.css) +- [beton.css](https://github.com/murgeljm/beton.css) \ No newline at end of file diff --git a/concrete.css b/concrete.css index 16141e7..4671760 100644 --- a/concrete.css +++ b/concrete.css @@ -1,101 +1,252 @@ -/*! concrete.css v1.1.1 | MIT License | github.com/louismerlin/concrete.css/ */ +/*! concrete.css v3.1.0 | MIT License | github.com/louismerlin/concrete.css */ -/* The Basics */ +/** + * Set universal color, main width, font and border-radius variables + */ -html { - font-size: 62.5%; - box-sizing: border-box; +:root { + --fg: #111; + --bg: #fff; + --font: Helvetica, Arial, sans-serif; + --font-h: Helvetica, Arial, sans-serif; + --main-width: 640px; + --radius: 0px; } -body { - font-size: 2rem; - font-weight: 400; - background: white; - color: #121212; - font-family: Helvetica, Arial, sans-serif; +/** + * Invert the colors if the user has dark mode activated. + */ + +@media (prefers-color-scheme: dark) { + :root { + --fg: #fff; + --bg: #111; + } +} + +/** + * 1. Modify the base font-size to 1.25rem, to make everything larger. + * 2. Set box-sizing globally to handle padding and border widths. + */ + +html { + font-size: 1.25rem; /* 1 */ + box-sizing: border-box; /* 2 */ } +/** + * 1. Continue the global box-sizing modification. + * 2. Set the underline size for all elements. + */ + *, ::after, ::before { - box-sizing: inherit; + box-sizing: inherit; /* 1 */ + text-decoration-thickness: .1rem; /* 2 */ +} + +/** + * 1. Remove body margin. + * 2. Set the text and background color to white and black by default. + * 3. Set the font-family. + */ + +body { + margin: 0; /* 1 */ + background: var(--bg); /* 2 */ + color: var(--fg); /* 2 */ + font-family: var(--font); /* 3 */ } +/** + * Set the link color to black + */ + a { - color: #121212; + color: var(--fg); } -blockquote, dl, figure, form, ol, p, pre, table, ul { - margin-bottom: 2.5rem; +/** + * 1. Stretch figure to full width of the section. + */ +figure { + margin: 0; /* 1 */ } +/** + * 1. Right-align text + * 2. Make figure caption a little smaller than normal text. + * 3. Add border at bottom. + * 4. Add spacing after the element. + */ +figcaption { + text-align: right; /* 1 */ + font-size: 0.8em; /* 2 */ + border-bottom: .2rem solid var(--fg); /* 3 */ + padding-bottom: .2rem; /* 4 */ +} + +/** + * 1. Set the max width of images to 100%, so that they don't overflow. + * 2. Set the height of images relative to their width. + */ + img { - max-width: 100%; + max-width: 100%; /* 1 */ + height: auto; /* 2 */ +} + +/** + * Add some padding around the main sections. + */ + +main section + section { + padding: 2rem 0; +} + +/** + * 1. Center the root main/header/footer elements horizontally. + * 2. Set the width of the elements to the main-width variable, with padding + * for mobile screens. + */ + +body > header, +body > main, +body > footer { + margin: auto; /* 1 */ + max-width: calc(var(--main-width) + 20px); /* 2 */ + padding-left: 10px; /* 2 */ + padding-right: 10px; /* 2 */ + width: 100%; /* 2 */ } -/* A Cool Container */ +/** + * 1. Add some padding around the main header. + * 2. Increase the size of text in the main header. + */ -.container { - margin: 0 auto; - max-width: 96rem; - width: 100%; - padding: 0 1rem; - position: relative; +body > header { + padding-top: 8rem; /* 1 */ + padding-bottom: 8rem; /* 1 */ + font-size: 1.2em; /* 2 */ } -/* The Button */ +/** + * Set the font-family for all section headings. + */ -.button { - text-decoration: none; +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-h); } +h1 { font-size: 2em; } +h2 { font-size: 1.5em; } +h3 { font-size: 1.17em; } +h4 { font-size: 1.00em; } +h5 { font-size: 0.83em; } +h6 { font-size: 0.67em; } + +/** + * Center the text in the footer. + */ + +footer { + text-align: center; +} + +/** + * 1. Change the style of the button. + * 2. Set the color and border of the button. + * 3. Add the pointer cursor when hovering a button. + */ + button, -.button, input[type="button"], input[type="reset"], input[type="submit"] { - border-radius: 0; - background: white; - color: #121212; - border: 0.3rem solid #121212; - padding: 0.4rem 1rem; - cursor: pointer; -} + display: inline-block; /* 1 */ + vertical-align: middle; /* 1 */ + padding: .2rem .5rem; /* 1 */ + font-size: 1rem; /* 1 */ + font-weight: normal; /* 1 */ + margin-bottom: .5rem; /* 1 */ + background: var(--bg); /* 2 */ + color: var(--fg); /* 2 */ + border: .1rem solid var(--fg); /* 2 */ + border-radius: var(--radius); /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * 1. Set the border of a disabled button to be dashed. + * 2. Add the not-allowed cursor when hovering a disabled button. + */ + +button:disabled, +input[type="button"]:disabled, +input[type="reset"]:disabled, +input[type="submit"]:disabled{ + border-style: dashed; /* 1 */ + cursor: not-allowed; /* 2 */ +} + +/** + * Set the list bullet to square. + */ -button.filled, -.button.filled, -input[type="button"].filled, -input[type="reset"].filled, -input[type="submit"].filled { - color: white; - background: #121212; +ul { + list-style: square; } -.button, -button, -dd, -dt, -li { - margin-bottom: 1.0rem; +/** + * Set a margin around the navigation bar + */ +nav { + margin: 2rem 0; } -/* The List */ +/** + * 1. Remove padding around the navigation bar's inner unordered list + * 2. Remove list style for the navigation bar's inner unordered list + */ +nav ul { + padding: 0; /* 1 */ + list-style: none; /* 2 */ +} -ul { - list-style: square; +/** + * 1. Set margins around the navigation bar's inner unordered list items + * 2. Make navigation bar unordered list elements render horizontally + */ +nav ul li { + margin: 0 .2rem; /* 1 */ + display: inline-block; /* 2 */ } -/* The Form */ +/** + * Set the border around a fieldset. + */ fieldset { - border-width: 0; - padding: 0; + border: .1rem solid var(--fg); + border-radius: var(--radius); } +/** + * 1. Modify the display of labels and legends. + * 2. Add a margin underneath. + */ + label, legend { - display: block; - font-weight: bold; - margin-bottom: .5rem; + display: block; /* 1 */ + font-weight: bold; /* 1 */ + margin-bottom: .4rem; /* 2 */ } +/** + * 1. Change the appearance of the text input. + * 2. Set the color and border of the text input. + */ + input[type="email"], input[type="number"], input[type="password"], @@ -105,206 +256,176 @@ input[type="text"], input[type="url"], textarea, select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border: 0.1rem solid #121212; - border-radius: 0; - box-shadow: none; - box-sizing: inherit; - height: 3.8rem; - padding: .6rem 1.0rem; - width: 100%; -} + -webkit-appearance: none; /* 1 */ + -moz-appearance: none; /* 1 */ + appearance: none; /* 1 */ + box-shadow: none; /* 1 */ + box-sizing: inherit; /* 1 */ + padding: .2rem .5rem; /* 1 */ + width: 100%; /* 1 */ + font-size: 1rem; /* 1 */ + color: var(--fg); /* 2 */ + background-color: var(--bg); /* 2 */ + border: .1rem solid var(--fg); /* 2 */ + border-radius: var(--radius); /* 2 */ + font-family: var(--font); /* 3 */ +} + +/** + * Set margin for form elements. + */ fieldset, input, select, textarea { - margin-bottom: 1.5rem; + margin: 0 0 .8rem 0; +} + +/** + * 1. Set the font color for the placeholder in inputs. + * 2. Set font-style to italic for the placeholder in inputs. + */ + +input::placeholder, +textarea::placeholder { + color: var(--fg); /* 1 */ + font-style: italic; /* 2 */ + opacity: 1; } -/* The Table */ +/** + * 1. Expand width to 100% for the table element. + * 2. Remove the distance between the borders of adjacent table cells. + */ table { - width: 100%; - border-spacing: 0; + width: 100%; /* 1 */ + border-spacing: 0; /* 2 */ } +/** + * Add padding around table cells. + */ + td, th { - padding: 0.6rem 0; + padding: .4rem; } -td { - border-bottom: 0.1rem solid #121212; -} +/** + * Remove left padding for first cell in a row. + */ -th { - border-bottom: 0.3rem solid #121212; - text-align: left; +td:first-child, th:first-child { + padding-left: 0; } -/* The Blockquote and the Code */ +/** + * Remove right padding for last cell in a row. + */ -blockquote, pre { - border-left: 0.3rem solid #121212; - margin-left: 0; - margin-right: 0; - padding: 1rem 1.5rem; - overflow-y: hidden; +td:last-child, th:last-child { + padding-right: 0; } -pre { - border: 0.1rem dotted #121212; - border-left: 0.3rem solid #121212; -} +/** + * 1. Add a border under the table header. + * 2. Align the text to the left in the table header. + */ -pre > code { - padding: 1rem 1.4rem; - font-size: 1.6rem; - white-space: pre; - display: block; +th { + border-bottom: .1rem solid var(--fg); /* 1 */ + text-align: left; /* 2 */ } -/* The Progress Bar */ +/** + * Add a thiner border under table rows. + */ -progress { - -moz-appearance: none; - -webkit-appearance: none; - border-radius: 0; - display: block; - height: 1rem; - border: 0.1rem solid #121212; - background: white; - color: #121212; - overflow: hidden; - padding: 0; - width: 100%; -} -progress::-webkit-progress-bar { - background-color: white; -} -progress::-webkit-progress-value { - background-color: #121212; -} -progress::-moz-progress-bar { - background-color: #121212; -} -progress::-ms-fill { - background-color: #121212; +td { + border-bottom: .05rem solid var(--fg); } -/* The Break Line */ +/** + * 1. Change the margins and padding. + * 2. Add a border on the left of these elements. + * 3. Set the y overflow to hidden to hide the navigation bar. + */ -hr { - border: 0.2rem solid #121212; - border-bottom-width: 0.1rem; +blockquote, pre { + margin-left: 0; /* 1 */ + margin-right: 0; /* 1 */ + padding: .5rem .8rem; /* 1 */ + border-left: .1rem solid var(--fg); /* 2 */ + overflow-y: hidden; /* 3 */ } -/* The Grid */ +/** + * 1. Set the rest of the border of the preformatted element to dotted. + * 2. Re-set the left border style. + */ -.row { - display: flex; - flex-direction: column; - padding: 0; +pre { + border: .05rem dotted var(--fg); /* 1 */ + border-left: .1rem solid var(--fg); /* 2 */ } -.row .column { - display: block; - flex: 1 1 auto; - margin-left: 0; - max-width: 100%; - width: 100%; +/** + * 1. Modify the display of the code block. + * 2. Reduce the font size of the code block. + */ + +pre > code { + white-space: pre; /* 1 */ + display: block; /* 1 */ + font-size: .8rem; /* 2 */ } -.row.mobile { - flex-direction: row; + +/** + * 1. Modify the display of the progress bar in all browsers. + * 2. Set the colors and border of the progress bar. + */ + +progress { + -moz-appearance: none; /* 1 */ + -webkit-appearance: none; /* 1 */ + display: block; /* 1 */ + height: .5rem; /* 1 */ + overflow: hidden; /* 1 */ + padding: 0; /* 1 */ + width: 100%; /* 1 */ + background: var(--bg); /* 2 */ + color: var(--fg); /* 2 */ + border: .1rem solid var(--fg); /* 2 */ + border-radius: var(--radius); /* 2 */ +} + +/** + * Set the background color of the webkit progress bar. + */ + +progress::-webkit-progress-bar { + background-color: var(--bg); } -.row.mobile .column { - width: unset; - padding: 0; +/** + * Set the color of the webkit progress bar. + */ + +progress::-webkit-progress-value { + background-color: var(--fg); } -@media (min-width: 40.0rem) { - .row { - flex-direction: row; - margin: 0 -1rem; - width: calc(100% + 2rem); - } - .row .column { - margin-bottom: inherit; - padding: 0 1.0rem; - } +/** + * Set the color of the mozilla progress bar. + */ + +progress::-moz-progress-bar { + background-color: var(--fg); } -/* Dark Mode */ +/** + * Set the border for the horizontal rule. + */ -@media (prefers-color-scheme: dark) { - body { - background: #121212; - color: white; - } - a { - color: white; - } - button, - .button, - input[type="button"], - input[type="reset"], - input[type="submit"] { - background: #121212; - color: white; - border-color: white; - } - button.filled, - .button.filled, - input[type="button"].filled, - input[type="reset"].filled, - input[type="submit"].filled { - color: #121212; - background: white; - } - input[type="email"], - input[type="number"], - input[type="password"], - input[type="search"], - input[type="tel"], - input[type="text"], - input[type="url"], - textarea, - select { - border-color: white; - } - td { - border-bottom-color: white; - } - th { - border-bottom-color: white; - } - blockquote, pre { - border-left-color: white; - } - pre { - border-color: white; - border-left-color: white; - } - progress { - border-color: white; - background: #121212; - color: white; - } - progress::-webkit-progress-bar { - background-color: #121212; - } - progress::-webkit-progress-value { - background-color: white; - } - progress::-moz-progress-bar { - background-color: white; - } - progress::-ms-fill { - background-color: white; - } - hr { - border-color: white; - } +hr { + border: .05rem solid var(--fg); } diff --git a/concrete.min.css b/concrete.min.css new file mode 100644 index 0000000..a74ec1e --- /dev/null +++ b/concrete.min.css @@ -0,0 +1,2 @@ +/*! concrete.css v3.1.0 | MIT License | github.com/louismerlin/concrete.css */ +:root{--fg:#111;--bg:#fff;--font:Helvetica, Arial, sans-serif;--font-h:Helvetica, Arial, sans-serif;--main-width:640px;--radius:0px}@media (prefers-color-scheme:dark){:root{--fg:#fff;--bg:#111}}html{font-size:1.25rem;box-sizing:border-box}*,::after,::before{box-sizing:inherit;text-decoration-thickness:.1rem}body{background:var(--bg);font-family:var(--font)}a,body{color:var(--fg)}body,figure{margin:0}figcaption{text-align:right;font-size:.8em;border-bottom:.2rem solid var(--fg);padding-bottom:.2rem}img{max-width:100%;height:auto}main section+section{padding:2rem 0}body>footer,body>header,body>main{margin:auto;max-width:calc(var(--main-width) + 20px);padding-left:10px;padding-right:10px;width:100%}body>header{padding-top:8rem;padding-bottom:8rem;font-size:1.2em}h1,h2,h3,h4,h5,h6{font-family:var(--font-h)}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.17em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.67em}footer{text-align:center}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;vertical-align:middle;padding:.2rem .5rem;font-size:1rem;font-weight:400;margin-bottom:.5rem;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:var(--radius);cursor:pointer}button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{border-style:dashed;cursor:not-allowed}ul{list-style:square}nav{margin:2rem 0}nav ul{padding:0;list-style:none}nav ul li{margin:0 .2rem;display:inline-block}fieldset{border:.1rem solid var(--fg);border-radius:var(--radius)}label,legend{display:block;font-weight:700;margin-bottom:.4rem}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;box-sizing:inherit;padding:.2rem .5rem;width:100%;font-size:1rem;color:var(--fg);background-color:var(--bg);border:.1rem solid var(--fg);border-radius:var(--radius);font-family:var(--font)}fieldset,input,select,textarea{margin:0 0 .8rem}input::placeholder,textarea::placeholder{color:var(--fg);font-style:italic;opacity:1}table{width:100%;border-spacing:0}td,th{padding:.4rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}th{border-bottom:.1rem solid var(--fg);text-align:left}td{border-bottom:.05rem solid var(--fg)}blockquote,pre{margin-left:0;margin-right:0;padding:.5rem .8rem;border-left:.1rem solid var(--fg);overflow-y:hidden}pre{border:.05rem dotted var(--fg)}pre>code{white-space:pre;display:block;font-size:.8rem}progress{-moz-appearance:none;-webkit-appearance:none;display:block;height:.5rem;overflow:hidden;padding:0;width:100%;background:var(--bg);color:var(--fg);border:.1rem solid var(--fg);border-radius:var(--radius)}progress::-webkit-progress-bar{background-color:var(--bg)}progress::-webkit-progress-value{background-color:var(--fg)}progress::-moz-progress-bar{background-color:var(--fg)}hr{border:.05rem solid var(--fg)} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico index 95bb72b..4323aff 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/icon.png b/icon.png deleted file mode 100644 index 7d3c932..0000000 Binary files a/icon.png and /dev/null differ diff --git a/index.html b/index.html index 70bdfb3..8260840 100644 --- a/index.html +++ b/index.html @@ -1,135 +1,130 @@ ---- ---- + - + - + concrete.css - - - - - + - - + + + + +
+

concrete.css

+

A simple and to the point classless CSS stylesheet

+ +
+
-
-

concrete.css

-

A simple and to the point CSS microframework

-

- GitHub - npm - CDN -

-
-
+

What is this ?

-

This is a CSS microframework, built for lighhtness and simplicity.

+

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.

+

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

+

Inspired by Milligram and Skeleton. +

- Version badge - Size badge - Downloads badge + Version badge + Size badge + Downloads badge

-
+

Get Started

In your HTML <head>

-

Just drop these lines into your HTML head.

-{% highlight html %} - - -{% endhighlight %} +

Just drop this line into your HTML head:

+ 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/concrete.css/3.1.0/concrete.min.css">

In your javascript project

-

Add the dependencies:

-{% highlight bash %} -yarn add normalize.css concrete.css -{% endhighlight %} -

Import them somewhere in your code:

-{% highlight js %} -import 'normalize.css' -import 'concrete.css' -{% endhighlight %} +

Add the dependency:

+ 
npm install concrete.css
+

Import it somewhere in your code:

+ 
import 'concrete.css'
+
+ +
+

Reading this page

+

In order to see the HTML code that creates the elements you're seeing, you can either:

+
    +
  • left-click and "View Page Source"
    • +
  • left-click and "Inspect"
    • +
  • read the index.html on GitHub +
    • +
-
+

Typography

-

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

-

h1 heading

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.

@@ -138,173 +133,113 @@
h6 heading

I can be small.

-{% highlight html %} -

h1 heading

-

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. -

-{% endhighlight %}
-
+
+

Sections

+

+ For structuring your page, you can use the <main> 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 <header> element. + You can see an example at the top of this page. +

+

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

+

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

+
+ +

Buttons

- +

- -{% highlight html %} -a link button -a filled link button +
- - +
+

Images

+

Simply add an image element, and voilà !

+ Placeholder +
- - -{% endhighlight %} +
+

Figures

+

Adding a caption to a figure is as simple as it sounds.

+
+ Placeholder +
This is the right-aligned caption for the figure. This example is very long to demonstrate at least + one line-break.
+
-
+

Lists

The concrete list is simply marked by a square.

-
-
-
    -
  • Unordered element 1
    • -
  • Unordered element 2
    • -
-
-
-
    -
  1. Ordered element 1
    2. -
  2. Ordered element 2
    3. -
-
-
-
-
Description element 1
-
Description element 1.1
-
-
-
- -{% highlight html %} -
    -
  • Unordered element 1
    • -
  • Unordered element 2
    • -
- -
    -
  1. Ordered element 1
    2. -
  2. Ordered element 2
    3. -
- -
-
Description element 1
-
Description element 1.1
-
-{% endhighlight %} +
    +
  • Unordered element 1
    • +
  • Unordered element 2
    • +
+
    +
  1. Ordered element 1
    2. +
  2. Ordered element 2
    3. +
+
+
Description term
+
Description detail
+
-
-

Grids

-

Concrete comes with a row class and a column class for your basic grid needs.

-

They use flexbox, which means you can easily write small classes to extend the power of the grid.

-
-
.column
-
.column
-
.column
-
.column
-
- -{% highlight html %} -
-
.column
-
.column
-
.column
-
.column
-
-{% endhighlight %} +
+

Navigation

+

A clean navigation bar is simple to achieve.

+
-
+

Forms

+ Please enter your information
- - + +
- - + +
- - + + + + - - + +
- -{% highlight html %} -
-
-
-
- - -
-
- - -
-
- - - - - -
-
-{% endhighlight %}
-
+

Tables

@@ -330,83 +265,43 @@

Tables

- -{% highlight html %} - - - - - - - - - - - - - - - - - - - - - - - -
NameYearSizeComment
Skeleton20115.7kBAwesome
Milligram20158.3kBAmazing
-{% endhighlight %}
-
-

Blockquotes

+
+

Blockquotes

"I'm quoting myself" - Louis Merlin
- -{% highlight html %} -
- "I'm quoting myself" - Louis Merlin -
-{% endhighlight %}
-
+

Progress Bar

40% - -{% highlight html %} -40% -{% endhighlight %}
-
-

Break line

-
- -{% highlight html %} -
-{% endhighlight %} +
+

Horizontal Rule

+
-
+

Sites using Concrete

- -
+ + - + \ No newline at end of file diff --git a/package.json b/package.json index 0ce687e..760e524 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,22 @@ { "name": "concrete.css", - "description": "A simple and to the point CSS microframework", - "version": "1.1.1", + "description": "A simple and to the point classless CSS stylesheet", + "version": "3.1.0", "main": "concrete.css", + "files": [ + "*.css" + ], "repository": { "type": "git", - "url": "https://github.com/louismerlin/concrete.css.git" + "url": "git+https://github.com/louismerlin/concrete.css.git" }, - "author": "Louis Merlin ", + "author": "Louis Merlin ", "license": "MIT", - "homepage": "https://louismerlin.github.io/concrete.css/" + "homepage": "https://louismerlin.github.io/concrete.css/", + "devDependencies": { + "csso-cli": "^4.0.2" + }, + "scripts": { + "prepublishOnly": "csso concrete.css -o concrete.min.css" + } } diff --git a/site.webmanifest b/site.webmanifest deleted file mode 100644 index 8cf99ee..0000000 --- a/site.webmanifest +++ /dev/null @@ -1,12 +0,0 @@ -{ - "short_name": "concrete.css", - "name": "concrete.css", - "icons": [{ - "src": "icon.png", - "type": "image/png", - "sizes": "192x192" - }], - "start_url": ".", - "background_color": "#ffffff", - "theme_color": "#ffffff" -} \ No newline at end of file