silicon

1.2.9

13kb 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 5 page layouts, <div class='width-xs'>, <div class='width-s'>, <div class='width-m'>, <div class='width-l'>, and <div class='width-xl'> they each take up 20%, 30%, 50%, 80%, and 100% 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 (Standard table style)
th1 th2 th3
td1 td2 td3
td1 td2 td3
td1 td2 td3

<table class='alternate'>

Caption (Alternate table style)
th1 th2 th3
td1 td2 td3
td1 td2 td3
td1 td2 td3

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Inline tags

Keyboard

CTRL + C 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='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.

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

<table class='alternate'> uses the alternate table style (doesn't change anything with the layout).

<* class='desktop-only'> only visible on desktop.

<* class='mobile-only'> only visible on mobile.

Notice cards

  • <* class='notice'> creates a focal point with uppercase text and center alignment.
    • <* class='notice warning'> creates a danger/red card with otherwise same styling as a normal notice.

Flexbox

  • <* class='flex'> makes any element a flexbox with vertical and horizontal center alignment in a row.
    • <* class='flex column'> vertical and horizontal alignment in a column.
    • <* class='flex wrap'> applies flex wrap to the element.

Grids

  • <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='grid'> <* class='span c-2 / 3 / 4 / 5'></*> </div> creates a grid item that spans multiple columns, going from 2 to 5.
    • <div class='grid'> <* class='span r-2 / 3 / 4 / 5'></*> </div> creates a grid item that spans multiple rows, going from 2 to 5.
    • These grid span items are all reduced to 2 on mobile for responsive design.

Container widths and heights

  • <* class='width-xs'> 20% viewport width
  • <* class='width-s'> 30% viewport width
  • <* class='width-m'> 50% viewport width
  • <* class='width-l'> 80% viewport width
  • <* class='width-xl'> 100% viewport width
  • <* class='width-100'> 100% parent width
  • <* class='height-100'> 100% parent height
  • <* class='fullscreen'> 100% of the entire viewport (width and height)

Style ideas

Here are some things you can create without the need for an extended list of classes.

Grid of cards

Text 1
Text 2
Text 3 
<div class='grid three gap'>
	<div class='card'> Text 1 </div>
	<div class='card'> Text 2 </div>
	<div class='card'> Text 2 </div>
</div>

Bento grid

Text 1
Text 2
Text 3
Text 4
Text 5 
<div class='grid five gap'>
	<div class='card span c-2'> Text 1 </div>
	<div class='card'> Text 2 </div>
	<div class='card span c-2 r-2'> Text 3 </div>
	<div class='card'> Text 4 </div>
	<div class='card span c-2'> Text 5 </div>
</div>