CSS Docs

The following guide illustrates some important concepts when writting CSS for kissu

General Classes

1. The goal is to have a single class that groups together multiple similar elements. For example, .object-window is the class that groups together every window object from previews to startup. Various subgroups exist such as the .react-draggable which is every dragable window. In some cases combination selectors are used. The ones listed are the most efficient ways to do them. The list of ones that I have recorded are:

   • .object-window All windows
   • .react-draggable All dragable windows
   • .svg-icon All svg icons
   • .media-player-icon All icons for mp3
   • .close-window-icon All icons for closing windows
   • .home-section The text dividing homepage sections
   • .section-stripe A colored stripe often used on headers
   • .section-container On the homepage there are info-boxes that contain things
   • .popular-thread Featured and Active threads are contained in this
   • .preview > .post-contents the backgrounds of posts that occu when hovering over links
   • .cite Backlinks and cites. .backlink > .cite for just backlinks
   • .page-number used page navigation. .current-page for selected page
   • .bud-label colored labels used on the footer form
   • .button Anything like a button
   • .sidebar-board-nav Links that move around the site(top and bottom included, alse the board)
   • .sidebar-effectors Clickables that open windows or change the styles
   • p Any text that is not inside of a window
   • bodyAny text not contained in a p tag
   • h3, h2, h1 Headings that denote sections
   • label text associated with checkboxes, radioboxes and searches
   Others exist but have not been written down. It may also be the case that these classes have not yet been added to certain objects. These cases should be reported.

2. The Sidebar and main container are two seperate things. It is best to treat them as seperate panes. Expanding either will push things off the page so it's widths controlled by javascript and will show no horizontal scrollbar in case of errors. When it comes to the sidebar adjusting font-sizes and styles has a chance to break things and require extra tuning. The sidebar also has two states. The Home and /f/ version and the thread version. Know which ones are being modified and how changes are effecting one vs the other

3. Pagelists are given backgrounds, however .sidebar-item > nav > .pagelist targets the sidebar's pagelist to remove the backournd and apply specific styling

Changing text elements

Using pseudo elements, text on the page can be changed using CSS. This involves hiding the original text by setting the font-size to 0 and then adding a pseudo element specifying the original font size. EG:

		.center-meta > h1::before {
			content: "asdfasdf";
			font-size: 30px;
		}
		.center-meta > h1 {
			font-size: 0;
		}
	

A Checklist

This is a list of things that need styling

• Preview containers
• Windows: Options, Report, startup, preview-chains, quick reply and captcha
• Recent Posts
• Poll creation and poll views .bar-label, .chart-title
• The scores on scoreboards .score-counter and .score-counter and .score-counter:hover and .score-submitted
• Right click Context menus
• no-opt and sage
• catalog-focus When clicking on catalog containers

• The rest is up to you.