What is it?
Syndrome is a stylesheet compiled into CSS via Sass to make my life easier when setting up future projects.
Clone from Github:
Syndrome RepoGrids
Grids can be used for anything and are responsive. Class Name: grid
1x1 (class="cell-1x1")
Cell 1
Cell 2
2x2 (class="cell-2x2")
Cell 1
Cell 2
Cell 3
Cell 4
2x6 (class="cell-2x6")
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Cell 10
3x3 (class="cell-3x3")
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Cell 9
Tables
Tables can be edited or just used to display information.
Normal Table
| First Header | Second Header | Third Header |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
Without Borders (class="borderless")
| First Header | Second Header | Third Header |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
Alternating Colored Rows (class="alternate")
| First Header | Second Header | Third Header |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
Colored Header (class="colored-header")
| First Header | Second Header | Third Header |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 1 | Cell 2 | Cell 3 |
Containers + Wrappers
Divs that hold things in a stylish way. Use the container to hold multiple things & save the wrapper for 1! Class Names: container, wrapper
Wrapper
Container
Text + Headers
Here are all the different ways text can appear.
H1: Syndrome
H2: Syndrome
H3: Syndrome
H4: Syndrome
H5: Syndrome
H6: Syndrome
P: Syndrome
Bold: Syndrome
Underlined: Syndrome
Anchor: SyndromeForms
Forms take in user input. Save the information for later or dont; it's up to you.'
Normal Form (class="main-form")
Table Form (class="table")
Task Name
Est. Time (mins)
Category
Images
Add a responsive image if you'd like.
Lists
Who doesn't love listing things?
Panels
A cool responsive way to show off.