metamn

Atoms

The atoms from Atomic web design

A Pen by metamn on CodePen.

License.

metamn

One-element CSS smartphone icon

Original idea by Kasper Nordkvist (http://kaspernordkvist.dk/lab/dtp/).

A Pen by metamn on CodePen.

License.

metamn

<div id="body-text-width">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare vitae tellus dapibus malesuada. Ut dapibus venenatis lorem quis ultrices. Ut in urna felis. Nunc porttitor ut ligula eu laoreet. Nunc dapibus augue pretium tortor sodales pellentesque. Suspendisse iaculis metus in nulla pulvinar, sit amet volutpat enim lacinia. Sed adipiscing ut velit in posuere. Nullam vulputate risus massa, at placerat velit lacinia quis.

Sed id augue nec dolor feugiat aliquet. Duis laoreet, enim et feugiat varius, velit enim interdum purus, ac dignissim urna mi nec nulla. Fusce lorem augue, convallis vitae consectetur aliquam, iaculis eu erat. Quisque aliquet in erat tincidunt vehicula. Nunc nisi diam, iaculis vitae sodales sed, viverra vel nibh. In in leo convallis nisl ornare bibendum. Sed molestie eleifend tempor. Nullam tristique quam sit amet ornare faucibus. Vestibulum pellentesque, odio sit amet sagittis ornare, nulla orci egestas diam, vel aliquet ligula ligula sed diam. Etiam ris

metamn

Verifying that +metamn is my openname (Bitcoin username). https://onename.io/metamn

metamn

1. Semantic HTML

• use the new HTML5 Elements like section, article, nav, header, footer, etc
• when these are not applicable use mostly div and span
• the above two rules combined with CSS3 Flexbox / Grid module makes a perfect match
• HTML is semantic when it is outlined well: https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fits-csongor.com%2F

2. Accessible HTML

• makes websites accessible for larger audiences than usual (people with sensory defects)

metamn

{
  "colors": [
    {
      "name": "white",
      "value": "#f1f1f1",
      "description": "The background color"
    },
    {
      "name": "black",
      "value": "#003A40",

metamn

{
  "fonts": [
    {
      "name": "Nimbus Sans",
      "description": "The default typeface",
      "family": "sans-serif",
      "character_set": "English, with OpenType Features",
      "served_from": "Typekit",
      "styles": [
        {

metamn

{% for color in colors %}
// {{ color.description }}
${{ color.name }}: {{ color.value }};
{% endfor %}

// Color combinations. Colors are not used standalone but in pairs
@mixin colors($name) {
{% for pair in color_pairs %}
  @if ($name == '{{ pair.name }}') {
    {% for property in pair.properties %}{{ property.name }}: {{ property.value }};

metamn

// The background color
$white: #f1f1f1;

// The text color
$black: #003A40;

// The highlight color
$blue: rgba(0, 0, 255, 1);

// A lighter highlight color

metamn

// The font mixin
@mixin font($variant) {

  @if ($variant == 'nimbus-sans-regular') {
    font-family: 'nimbus-sans', sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  @if ($variant == 'nimbus-sans-bold') {