Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathexl/chemistry-css
A chemistry CSS library for creating Chemical Structures and Equations with just HTML.
https://github.com/mathexl/chemistry-css
Last synced: 3 months ago
JSON representation
A chemistry CSS library for creating Chemical Structures and Equations with just HTML.
- Host: GitHub
- URL: https://github.com/mathexl/chemistry-css
- Owner: mathexl
- Created: 2015-11-12T21:03:27.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-20T21:43:45.000Z (almost 9 years ago)
- Last Synced: 2024-05-08T09:40:08.489Z (6 months ago)
- Language: CSS
- Size: 69.3 KB
- Stars: 79
- Watchers: 6
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- Awesome-CSS-Resources - chemistry-css:
README
# ChemistryCSS
A chemistry CSS library for creating Chemical Structures and Equations with just HTML. Similar project to: https://github.com/mathexl/math-css
Chemistry CSS is a library that lets you currently construct chemical diagrams with easy HTML. Support soon to be added for:
* Equations, including multi-line equations
* 3D bond structure (notation for specifying direction of bonds)
###A quick table of contents:
1) Setting Up
2) Adding Elements
3) Adding Bonds
4) Types of Bonds
##Setting Up
To use the board, first declare you are creating an equation by using the ```chembox``` attribute.
```HTML
```
##Adding Elements
Within the Chembox, declare elements using the ```chempart``` attribute. You also need to add a location attribute, modeled by the format ```boxX_Y```. For instance, the horizantal component 3 and vertical component 2 would be ```box3_2```. The current grid works up to 10 on the X and 20 on the Y. **You can modify the size of the grid by rerendering extra boxes using the Python script (```Python3 rerenderer/render.py```) in rerenderer/render.py and linking the created ```rerenderer/box.css``` file.** Further, chembox utilizes the ```zoom``` attribute making resizing easy. Since the boxes are absolute, you can resize the chembox div without interfering with the actual components within.
Within the div, include the letter name of the element in the grid. Format explained below:
```HTML
O
```
##Adding Bonds
Part of the goal of Chemistry-CSS was to keep the HTML minimal and readable. Therefore, it uses the ```
``` tag as a way of delineating bonds to other elements. You can only declare bonds pointing right; this is to keep the code clean (therefore, all bonds have to be declared from their left element).
The first ```
``` tag is the top-right hand corner bond. The second is the right bond, then the right-bottom bond, and then the bottom bond. Commented HTML below of a carbon with two bonds facing right:
```HTML
C
```
The order of the ```
``` tags matter. This also makes editing structures easy since all the ```
``` tags are already declared, even if null. If you, however, only declare, for instance, a top right bond, you can skip the next tags. For the sake of a more complete example, the following code:
```HTML
O
C
C
C
C
N
```
Will render the following image:
##Types of Bonds
There are a few common bond attributes you can add. They are listed below .
```singlebond```, ```doublebond```, ```triplebond```, ```partialdoublebond```,
```partialsinglebond```, ```partialtriplebond```.