Article note: Really handsome … #marked

CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work.

Most CSS frameworks are built using preprocessors such as Less or Sass, which is great, except when folks include the entire library like this:

<!-- Bootstrap 4 - 192KB -->
<link rel="stylesheet" href="bootstrap.min.css">

Or this:

<!-- Semantic UI 2.2 - 567KB --> 
<link rel="stylesheet" href="semantic.min.css">

Note the file sizes for the minified versions. And that doesn’t even include scripts.

There are a couple problems here:

One, you don’t need most of the things frameworks ship with. They weren’t designed for you to use the bundled version, except perhaps for building a really quick prototype.

Two, when you use the bundled version you lose what makes preprocessors so great, such as customizing everything with variables. For example, in Bootstrap 4 you’ll need to update at least 30 styles just to change the primary color globally. Fail!

Of course, the reason most people load everything is because it’s easier. You don’t have to worry about Less, Sass, Stylus, or setting up a build script.

What if you could have the best of both worlds?

Introducing Shoelace.css

I created Shoelace.css to solve this very problem. It’s a highly customizable, pure CSS starter kit that weighs in at only 31KB minified (7.9KB gzipped). You can load it locally or via CDN, yet still customize everything with variables. And it’s completely free.

Shoelace uses a well-supported feature of CSS called Custom Properties. Many people like to call them “CSS variables.” Either way, they’re incredibly useful.

You define custom properties in your stylesheet like this:

:root {
  --body-color: #000;
  --body-bg-color: #fff;
  --link-color: blue;
}

And then use them later on like this:

body {
  color: var(--body-color);
  background-color: var(--body-bg-color);  
}

a {
  color: var(--link-color);  
}

The nice thing about custom properties is that they cascade, so you can override them as needed. To customize Shoelace, just override a few variables and you’re done. No preprocessing required!

Check out this demo on CodePen to see Shoelace in action. You can change the variables and watch components update right in the browser.

No magic. Just CSS.

What’s in the Box

I like to think of Shoelace as a CSS reset sprinkled with helpful components. It doesn’t do quite as much as a full blown framework, but that’s intentional. It ships with the essentials because that’s usually all you really need. Of course, you can extend Shoelace with your own components as needed.

Here’s what you get out of the box:

  • CSS Reset
  • Default Content Styles
  • Alerts
  • Badges
  • Buttons
  • Forms
  • Loaders
  • Tabs
  • Tables
  • Text Utilities
  • Float Utilities
  • Sizing Utilities
  • Spacing Utilities

One thing that Shoelace doesn’t ship with is a grid system. This is also intentional, as support for the CSS Grid has improved significantly and you really don’t need one anymore. If you haven’t explored the CSS Grid yet, Rachel Andrew has created Grid By Example to bring you up to speed.

If you have an obligation to support older browsers, you’re encouraged to include your favorite grid system on top of Shoelace.

The Future of CSS frameworks

I don’t like to call Shoelace a framework. It’s more of a “CSS starter kit” that lets you build things without the overhead preprocessors require. The fact that you can <link> to it with one line and immediately have access to a fully customizable CSS boilerplate is incredible.

I think Shoelace is the future of CSS frameworks. Preprocessors still have a place in the world of web design, and they will at least until color modifiers and custom media queries land, but CSS is catching up fast — and Shoelace is taking full advantage of it.

Shoelace was created by @claviska. You can learn more about this project by visiting shoelace.style.

The post Shoelace.css: A Back to the Basics CSS Starter Kit appeared first on David Walsh Blog.

Old but not bus­ted … – Die­ser Inhalt wur­de vor mehr als 12 Jah­ren publi­ziert. Die Kor­rekt­heit und Ver­füg­bar­keit von Links kön­nen lei­der nicht gewähr­leis­tet werden.

POLYKON – die Daten­bank für Poly­me­re als Kon­ser­vie­rungs- & Restau­rie­rungs­mit­tel ent­hält struk­tu­rier­te Infor­ma­tio­nen zur che­mi­schen Ein­ord­nung, den Eigen­schaf­ten und der Ver­wen­dung zahl­rei­cher Poly­me­re, die in der Restau­rie­rung ein­ge­setzt wur­den und wer­den. Sie haben die Mög­lich­keit mit Hil­fe der Schnell­su­che oder der erwei­ter­ten Suche nach Pro­duk­ten, Poly­mer­ty­pen oder Anwen­dungs­bei­spie­len zu recherchieren.

So steht es unter polykon.fh-potsdam.de geschrie­ben und ich bin sehr froh, dass wir es so (schön) geschafft haben! (Aus der v1.0 von heu­te wird aber bestimmt in den nächs­ten Tagen noch ne v1.5 oder so…)

Dan­ke an Alle!

Ich wer­de dann jetzt mal mit der Doku­men­ta­ti­on begin­nen… *puhhh*

PS:
Der Code-‘Wahnsinn’ gehört da hin… 😉

PPS:
Die URL www.polykon.fh-potsdam.de funk­tio­niert nicht!

Old but not bus­ted … – Die­ser Inhalt wur­de vor mehr als 18 Jah­ren publi­ziert. Die Kor­rekt­heit und Ver­füg­bar­keit von Links kön­nen lei­der nicht gewähr­leis­tet werden.

Das Web der zwei­ten Generation:

  • alle quat­schen d’rüber;
  • kei­ner weiß, was es ‘wirk­lich’ is
  • … und jeder weiß es besser;
  • sieht voll geil aus;
  • erfin­det das Rad teil­wei­se neu.

Auf der Suche nach neu­en Ideen für das Web­de­sign der neu­en Sei­te von “Schö­ner Schen­ken”, purz­le ich nun schon seit ein paar Tagen von einer Sei­te des WWW zur nächs­ten und ent­de­cke dabei die Web-Tech­no­lo­gien neu.

Um (auch für mich) ein paar Ansät­ze und Ideen fest­zu­hal­ten, ein­fach mal eine klei­ne Link-Liste.
Wei­ter­le­sen

Old but not bus­ted … – Die­ser Inhalt wur­de vor mehr als 18 Jah­ren publi­ziert. Die Kor­rekt­heit und Ver­füg­bar­keit von Links kön­nen lei­der nicht gewähr­leis­tet werden.

Um mich wie­der mal um die wich­ti­gen Sachen in mei­nem Leben zu drü­cken ;), habe ich heu­te mal das (für mich) neue Gale­rie-Script Zen­Pho­to und die dazu pas­sen­den Word­Press-Plug­ins Zen­Press (zum ein­fa­chen Hin­zu­fü­gen von Zen­Pho­to-Bil­dern in WP-Bei­trä­ge) und Zen­Show (zeigt vier Zufalls­bil­der aus der Zen­Pho­to-Gale­rie in der Side­bar an *fli­krlike*) aus­pro­biert.

Naja, nach­dem alles funk­tio­niert hat, habe ich jedoch gleich alles wie­der deak­ti­viert. Die Plug­ins waren funk­tio­nal und hilf­reich. Lei­der ist jedoch das Gele­rie-Script noch nicht ganz aus­ge­reift. – Ich wer­de aber ein Auge auf Zen­Pho­to haben, da es sehr viel­ver­spre­chend aussieht…

Im Fol­gen­den mal ein paar Anmer­kun­gen zu Zen­Pho­to, was mir gefal­len hat und war­um ich dann doch wei­ter­hin mei­ne Enhan­ced Simp­le PHP Gal­lery benutze.
Wei­ter­le­sen