
Mattis Purus Vulputate
Lorem ipsum dolor sit amet consec te tur adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua.
This style guide is intended to help new designers, developers and content managers understand the structure and patterns of Crossroads.net.
:
in property declarations.{
in rule declarations.#000
unless using rgba()
.margin: 0;
instead of margin: 0px;
.Here are some good examples that apply the above guidelines:
// Example of good basic formatting practices .styleguide-format { color: #000; background-color: rgba(0, 0, 0, .5); border: 1px solid #0f0; } // Example of individual selectors getting their own lines (for error reporting) .multiple, .classes, .get-new-lines { display: block; }
In general, the Sass files for the project will live in /app/scss
. Within that directory, there are subdirectories that we use to organize the code.
base/
folder holds what we might call the boilerplate stuff for your project. helpers/
folder gathers all Sass tools and helpers we’ll use across the project, including variables and overrides to Bootstrap. layout/
directory contains files which set up styles for the main sections of the layout (header, footer, and so on). modules/
folder. While layout/
is kind of macro (defining the global wireframe), components/
is more micro. It can contain all kinds of specific modules like a slider, a loader, a widget, or anything along those lines. pages/
folder and in a file named after the page.app/ | └── scss/ | ├── base/ | ├── brand.scss # Crossroads colors, etc | ├── typography.scss # Typography rules | ... # Etc… | ├── helpers/ | ├── style-overrides.scss # Override Bootstrap styles | ├── variable-overrides.scss # Override Bootstrap variables | ... # Etc… | ├── layout/ | ├── footer.scss # Footer styles | ├── forms.scss # Form styles | ... # Etc… | ├── modules/ | ├── billboard.scss # Ad Boxes | ├── brandbar.scss # Brandbar | ... # Etc… | ├── pages/ | ├── home.scss # Home specific styles | ├── blog.scss # Blog specific styles | ... # Etc… | | └── main.scss # primary Sass file
If a component of the site is turned into an Angular module, then the structural styling for the module will live outside of the app/scss
directory. The styling that is required by the module to work on it's own should live in that's module directory. An example of this is the Profile module. If you have styling for the module that is just theming (colors, typeography, etc) and not structural, then it should live in the scss folder: app/scss/modules/profile.scss
modules/ └── profile/ # Example using the Profile module └── app/ └── css └── module.scss # Non-theme module styles ... # Etc…
app/ └── scss/ └── modules/ └── profile.scss # Theme styles for the Profile module
is-
as in is-hidden
or is-collapsed
..pod
, .pod-constrained
, .pod-callout
)Elements that occur exactly once inside a page can use IDs, otherwise, use classes. When in doubt, use a class name.
#selector
) make sure that you have no more than one in your rule declaration. A rule like #header .search #quicksearch { ... }
is considered harmful..listings-layout.bigger
use rules like .listings-layout.listings-bigger
. Think about ack/grep
ing your code in the future.disabled
, mousedown
, danger
, hover
, selected
, and active
should always be namespaced by a class (button.selected
is a good example).We use Autoprefixer to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. For that reason, you do not need to include any vendor prefixes in your SCSS.
We use inline SVGs with the <use>
element for icons. For more information as to why, read here.
Used to indicate the site is waiting for something to load. Use <preloader full-screen='false'> </preloader>
to display in an element. When used for a whole page, you just have to make sure all of your data is being resolved in the route. This uses <preloader full-screen='true'> </preloader>
.
We've created a hierarchy of layouts as follows:
base: Basic structure, including head elements | ├── default: Adds a Header and Footer | | | └── container: Adds the container wrapper | | | ├── container_row: Adds the row wrapper | | | | | ├── one_column: Central content section only | | | | | | | └── post: Adds post meta data (title and date) | | | | | ├── left_column: Adds a left sidebar section | | | | | └── right_column: Adds a right sdiebar section | | | └── row: Adds the row wrapper, without a container wrapper | | | └── full_width: Spans the entire page width | └── full_page: No header or footer, complete flexibility within the body
Click to view example:
# | First Name | Tables |
---|---|---|
1 | Michael | Are formatted like this |
2 | Lucille | Do you like them? |
3 | Success | |
4 | Danger | |
5 | Warning | |
6 | Active |
# | First Name | Tables |
---|---|---|
1 | Michael | This one is bordered and condensed |
2 | Lucille | Do you still like it? |
This is a lead paragraph.
This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks.
Muted color paragraph.
Warning color paragraph.
Danger color paragraph.
Info color paragraph.
Success color paragraph.
Emphasis color paragraph.
This is text in a small
wrapper. NBD, right?
Here's what a blockquote looks like in Bootstrap. Use small
to identify the source.
function preFormatting() { // looks like this; var something = somethingElse; return true;}
The Primary .btn-primary
is used as the Call to Action button. It should never be used as a standard button type.
The Standard .btn-standard
is to used for all buttons that aren't the Call to Action.
The Secondary .btn-secondary
is used as a secondary call to action. It should never be used as a standard button type, or as the primary call to action.
The Standard (Dark) .btn-standard-dark
is used as a standard button, but when the background color of the containing container calls for it.
This is the bootstrap default button .btn-default
that is used by many third party libraries. It can be treated as a standard button, primarily, when attached to a form element. i.e. Datepicker.
Use .btn-block-mobile
on form submit buttons so they are smaller on desktop, and expand to full width on mobile.
These buttons are to be used only inside an alert as shown in the example below.
The .disabled
class is added to a button while loading.
Primary button example
Primary button example
Standard button example
Standard button example
We use IMGIX to serve our images. This service assures the correct image size is delivered to the browser based on the size of the container and viewport of the device used to view the page.
Images are hosted on Amazon S3 but served from IMGIX, use the data-src="//crds-cms-uploads.imgix.net/content/images/
along with class imgix-fluid
to take advantage of this service.
img-rounded
img-circle
img-thumbnail
For background images, the data-src
needs to exist on the contain with the background along with class imgix-fluid-bg
. Use class img-background
to make the image cover the contain and center.
.panel
, .text-muted
and .small
classes.
Growl-style alerts will appears in a fixed position in the top center of the page.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Text is centered both vertically and horizontally.
"It's a great feeling to serve others who are less fortunate in our city, and it's what God calls us to do."
Pellentesque {{styleguide.dynamicTooltipText}}, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at left eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur right nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas bottom pharetra convallis posuere morbi leo urna, fading at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus delayed turpis massa tincidunt dui ut.
I can even contain HTML. Check me out!
Popover on desktop, collapsable well on mobile
Lorem ipsum dolor sit amet consec te tur adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Large (32 x 32px)
Medium (20 x 20px)
Small (16 x 16px)
With Tooltips
With Custom URL Info