Welcome to the styleguide of this project. This guide is responsible to demonstrate the display of different design patterns and components of the project, making them perfect for every possible use case within the project boundaries.

Paragraph

This section is dedicated to demonstrate paragraphs and basic text-formatting. Some text is formatted and decorated intentionally to exemplify the features.

You’ll be seeing some headings, figures, and horizontal rules sprinkled around to title and separate different section, still we have a demonstration section dedicated to the headings and figures as well.

As you can see, the paragraphs here have a marginal difference between them. This is for better readability and tidiness of the text. This marginal difference has been made adaptive according to the screen-size.

Text-formatting

To demonstrate the formatting, here is some bold text, which is marked using the <b> tag. Another way to mark the text bold is to use the <strong> tag; here is an example of strong text. Text can also be italic with <i> or <em> tags.

Here is some deleted text making use of <del> element.

Headings

Here is a bunch of headings with no paragraph/text in between. See how seamlessly they go with each other.

Story Time.

Once there lived a fox and a dog.

The fox was really quick…

Whereas, the dog was too lazy.

The quick fox jumped over the lazy dog one fine day.
The story ends with dog’s not even reacting to it.

Below are some more cases of headings grouped together ignoring the hierarchical flow:

I should be a title

I could be the summary of a story based on the title above


A section starts with me

I may serve as a sub-heading to the section

Now, let’s take a look how our headings look with paragraphs and images.

Sample section

Here goes an introductory paragraph for our sample section, with some meaningless text further just to demonstrate a lengthy paragraph below the level-2 heading, which is also the opening heading of our sample section.

I am a sample sub-section

Again some sample stuff to show-off a sub-section-like area for our sample section, followed by an image, after some nonsense text used for dummy purpose.

Code-blocks

Talking about code; in the above paragraphs, you’ve already seen a glimpse of the <code> tag. Next we are gonna take a look at the <pre> element to feature example code blocks.

A <pre> block
/* Code-blocks */
pre {
  padding: $sp--block * 1rem;
  overflow: auto;
  tab-size: 6;
  &::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    cursor: pointer;
  }
}

Tables

Now, let’s take a look at how our tables look like. I made a quick table of the technologies I have been using in order to bring up this template.

Tech used in making of this template
Structure Styling Templating Tasks Others
HTML (of course) Sass, that compiles into CSS Nunjucks by Mozilla Gulp.js Browsersync to live-reload the testing environment

Looks good, doesn’t it? If you see this page on a mobile device, the table will not shrink, but a scrollbar will be there for you within the table to look through the data.

Figures

Let’s write some text so that an image figure can follow a paragraph good enough in length. Later we’ll wrap the text around images, and see how the alignment of the media elements work within text.

It’s here just for an example’s sake.
Right-aligned figure

You might have noticed that little bleeding-out effect on the right-side. It is enabled for the bigger screens only. In fact, both the right and left alignment of figures is available on phablet-sized screens onwards.And now, we are gonna look at the wrapping of text around right or left-aligned images. Let’s do that for the right-aligned image figure first.

Let’s see how a left-aligned figure looks like.

Here it is. Doesn’t look bad either. You can take a look at the media section to have some advanced layout-level demonstrations.

Quotes

After code comes the turn of quotes. Quotes aren’t 100% ready yet, but still here is a sneak-peek of what they are gonna look like:

It’s actually a paragraph and not the plain implementation of text in here. A para when found last of the type, the default marginal difference alloted to it gets collapsed automatically.
Styleguide: Text

Unordered list

Default
  • A sample unordered list-item
  • Another sample list-item
  • One more list-item with a little more text
  • The fourth dummy list-item
  • The last child
Nested
  • The first child
  • The child which has another unordered list as its child
    • The first child of the nested unordered list
    • The second one which again has some nesting done within
      • The second nested list’s first child
      • And the last one
    • The third and the last child of the nested list
  • One more list-item with a little more text
  • The fourth dummy list-item
  • The last child

Ordered list

Default
  1. A sample unordered list-item
  2. Another sample list-item
  3. One more list-item with a little more text
  4. The fourth dummy list-item
  5. The last child
Nested
  1. The first child
  2. The child which has another unordered list as its child
    1. The first child of the nested unordered list
    2. The second one which again has some nesting done within
      1. The second nested list’s first child
      2. And the last one
    3. The third and the last child of the nested list
  3. One more list-item with a little more text
  4. The fourth dummy list-item
  5. The last child

Definition lists

The first term
It’s the first term for our definition list
One more term
The second one, just to expand the list a bit more
The last one
It lasts the list

Mixed-up lists

  • This is an unordered list
  • With some other lists nested within
    1. Here comes the first nested list
    2. And it’s ordered
    3. With another list nested within
      • Our second nested list
      • And here comes another nesting
        Definition term
        With a term description, of course
        Another term
        Just to accompany the first term
      • Shouldn’t we add one more nested element?
        1. Here we go
        2. An ordered list
        3. With no more nesting
  • Let’s keep it short, keep it simple

Forms and CTAs

Basic Form Elements



CTACTA BorderedCTA Transparent
SQCIRounded Corners

MicroTinySmallDefaultBigLarge
Huge & Wide
Big. Fat. FW.