Main menu

LCARS CSS Grid

Based on the Star Trek: The Next Generation LCARS (Library Catalog and Retrieval System) computer interface created by Michael Okuda. I also got the specifications from LCARS47.com for the shape specifications and color palettes, modifying the dimensions to be a bit more rounded. The LCARS SDK is also helpful.

This design makes use of CSS Grid and SVG to recreate the designs in an HMTL document. The odd shapes (endcaps, elbows, etc.) are created as SVGs using Adobe Illustrator. The responsive layout and design is possible through the flexibility of CSS Grid. Resizing the window will show that the horizontal and vertical block elements resize to fit the space.

There is still some work to be done on device sizing, and eventually I hope to make a WordPress template out of it, But for now, this will do.

This project is stored on GitHub if you wish to examine it. If you wish to access the Illustrator file with the complete collection of LCARS shapes that I created, it is also on GitHub.