CSS Improvements
Quick Fix Classes
Primary Color Text
.primary = primary color red (for BC)
Remove Image Radius
.sq-corners = for when you need an image that has to be square for some reason, like a logo that might get cut off.
Unstyled Unordered Lists
For those lists where you don't want the bullets. Add the class .unstyled to the <ul> tag.
- Item 1
- Item 2
- Item 3
Removed Margin
I have added CSS to the BC custom CSS to rectify some things that were not addressed by the iFactory designers. The first is that I removed the awkward margin from the top of the H2 when it is the first heading in the content. The extra margin is especially noticeable on pages that have side navigation.
Regular H3
This heading is the normal one.
H3 .remove-top-margin
I removed the margin so that there isn't so much white space. The class .remove-top-margin sets the top margin at 0.
Clearfix
This is to fix it when you have a little content with a floating image and you want the next section to not wrap around the photo.
- I added div tags <div></div> around the photo, h2, and this paragraph.
- I added .clearfix to the div <div class="clearfix">.
This paragraph does not wrap around the photo.
Horizontal Rule
Adjusted the to match the bottom border used for components.
Adding the class .hr-wide will make your horizontal rule 100% width like the bottom border of the homepage components.
Well
Alert
This well matches the "blockquote" component and can be used as an alert. Add class .bordered-well.
Set up with a series of divs and the SVG component. Divs set up like this:
<div class="bc-alert" role="alert">
<div class="bc-alert-con"></div>
<div class="bc-alert-header"><h2>Alert</h2></div>
<div class="bc-alert-inner">
<p>Content</p>
</div>
</div>
With cursor in the red circle, add the SVG component and the icon of your choice. I plan to make this a component at some point.
Tables
Full-Width
Sometimes tables do not go the full-width of the page. Add the class .table-full-width to make them go all the way.
Table Captions
Captions are inherently centered in this design. Adding class .h2-.h6 will make them appear like headings. If you use <p></p> tags in the <caption></caption> tags will align the content to the left.
| High School Course | 太阳城官网 - Dual Enrollment Course |
|---|---|
| English 12HP | ENGL B1A Expository Composition (3.0) ENGL B1B Types of Literature (3.0) |
| US History AP | HIST B17A History of the United States (3.0) HIST B17B History of the United States since 1870 (3.0) |
| AP Euro | HIST B4B European Civilization (3.0) |
| Basic Elements of Music | MUSC B2 Basic Elements of Music (3.0) |
| Geology Honors | GEOL B10 Introduction to Geology (3.0) GEOL B10L Introduction to Geology Lab (1.0) |
| High School Course | 太阳城官网 - Dual Enrollment Course |
|---|---|
| English 12HP | ENGL B1A Expository Composition (3.0) ENGL B1B Types of Literature (3.0) |
| US History AP | HIST B17A History of the United States (3.0) HIST B17B History of the United States since 1870 (3.0) |
| AP Euro | HIST B4B European Civilization (3.0) |
| Basic Elements of Music | MUSC B2 Basic Elements of Music (3.0) |
| Geology Honors | GEOL B10 Introduction to Geology (3.0) GEOL B10L Introduction to Geology Lab (1.0) |
<table class="table-full-width"><caption><p class="h4">Table with .tab.e-fullwidth</p><p>Note that鈥�</p></caption><thead>鈥�</table>Embeds
Videos
Video Container for responsive videos. Add div tags around the iframe with class .video-container. Remove the width and height atributes (and any other junk like border attributes).
Google Calendar
For a Google calendar embed, add a dive with the class .google-cal-frame. Remove width and height (and any other attributes that will be a validation error) and remember to add a title.
Gooble Maps
For a google map, add a div with the class .google-map-frame and remove the width and height. Add a title attribute. This should display as a square.