silicon

1.2.6

11kb classless CSS framework

github / download - made by tyler

CSS without the requirement for classes. there are classes in silicon, but you could use silicon purely with no classes, just tags such as <table>. fonts are also included in the css file, so you don't need to link any.

silicon also has a light and dark mode that switches with the clients operating systems preference

important information there are 4 page layouts, <div class='vp-xs'>, <div class='vp-s'>, <div class='vp-m'>, and <div class='vp-l'> they each take up 20%, 30%, 50%, and 80% of the screen respectively on at least 1920x1080 and slightly more on smaller displays, by default the <body> will use 30% of the screen, these classes will up a portion of the actual screen/viewport. it should be noted that all 3 of these viewport classes use 90% of the screen on mobiles.

forms

buttons

table

caption
th1 th2 th3
td1 td2 td3
td1 td2 td3

header 1

header 2

header 3

header 4

header 5
header 6

inline tags

keyboard

ctrl in case you want to show a keyboard shortcut

code

print('hello world') you might want to embed a snippet of code. you can also use <code> inside a <pre> to get a code snippet spanning multiple lines.

example here
sample tag here

here is a var tag

text highlighting

here is an ins tag, here is a del tag, and here is a mark tag

lists

unordered list

ordered list

  1. list item 1
  2. list item 2
  3. list item 3
  4. list item 4
    1. embedded list item 1
    2. embedded list item 2
    3. embedded list item 3

blockquote

this is a blockquote
author name, publication

details

details summary

details content

aside

classes

these classes are not required in any way and are completely optional to use.


<* class='card'> a card with borders, could be used to separate content from something else.

<* class='flex'> makes any element a flexbox with vertical and horizontal center alignment.

<* class='wide'> makes any element 100% width relative to it's parent.

<* class='left / center / right'> aligns any text to the left / center / right.

<* class='no-resize / all-resize / ho-resize / ve-resize'> allows or disallows a textarea to be resized in specified directions.

<* class='notice'> creates a focal point with uppercase text and center alignment.

<input / textarea / select class='small'> gives less padding on these elements to make them smaller.

<button class='big'> gives more padding on the button to make it the same size as inputs.

<div class='grid one / two / three / four / five'> creates a grid with a specified column count.

<div class='grid gap'> adds the standard gap to the grid.

<div class='vp-xs / vp-s / vp-m / vp-l'> changes the width of the <div>, to set widths mentioned here.