Front Street Customizable Front-End Web Framework
Core
Front Street's core styling includes basic normalization, reset, and scaffolding along with the elements you see below. Core styling requires no JavaScript. If you'd like to use Front Street's core by itself, we've compiled a frontstreet-core.css
file for you. — This is a great starting point for more heavily styled projects.
- Buttons Many different practical types of buttons.
- Forms Field types and sizes, and form layouts.
- Grid Flexbox grid system, 10-column and 12-column.
- Lists Various ways to use HTML lists.
- Media Responsive images, videos and galleries.
- Quotes Blockquotes in various layouts and formats.
- Tables All the default styling for responsive tables.
- Typography Various headings and other useful typographical elements.
- Utilities Useful utilities for displaying, alignment, etc.
Block Types
Below are all the block types included with Front Street, which extend the core elements above. If you're looking to implement Front Street in its entirety, you'll simply include the frontstreet.css
and frontstreet.js
files in your website.
- Alert Contextual display notices.
- Background Background shading, parallax and sliders.
- Breadcrumb Classic navigational necessity.
- Button Extra buttons and animations.
- Divider Horizontal rules and underlines.
- Label Inline label tags.
- Loader Animated multi-purpose loader.
- Modal Custom integration of Magnific Popup.
- Menu Various responsive navigational elements.
- Mobile Menu Mobile-only navigation.
- Progress Bar Display progress of tasks as a percentage.
- Slider Custom integration of Owl Carousel.
- Tabbed Tabbed content combined with different menu styles.
- Testimonial Quotes to highlight client feedback.
- Toggle Show, hide and group content.
- Tooltip Classic tooltips for hovered links.
- Widget Containers for aside content.
Extras
This section includes a few extra features for you. — The color library is compiled as a separate frontstreet-colors.css
file, you'd include separately (this probably isn't something most projects would be using). And the helpers come with the default implementation of frontstreet.css
, but will not be included if you use frontstreet-core.css
.