Style guide

FM signals never looked so good

What's in here

This is the graphic reference for K1FM. Here you'll find everything regarding:

What's not

There are no explainig about the CMS utilized or any other Python/Php solution implemented here.


Logo and Typography

Logo is made in Varela Round from Google Fonts and its payoff is made in Crete Round from dafont. Website headlines are also in Varela Round and the regular text is in Lato always by evergreen Google font.

Here's some variant of the logo:


Font sizes are slightly updated between viewports, base font-size is 14px for small viewports, 16px for middle size screens and 18px for wider ones.

Baseline is updated according to screen size: Add "?baseline=show" in any URL to see baseline in the background.

Headline level one

Here's a complete list of all headlines. H1 headlines should be limited to one per page and they should have a maincontent__title class in it. Here's the rest of headlines.

Headline level two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, ad, voluptas aspernatur dignissimos hic illum adipisci corporis ex eos libero quod sint tempora in aliquam sed architecto ut quasi a.

Headline level three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, nemo natus provident ullam ratione perferendis ab aliquid repellendus magni nam beatae eligendi tenetur quaerat. Vero, voluptatum placeat in delectus quibusdam!

Headline level four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eos, dolorum, corporis voluptatem animi iste error dolore facilis provident ipsam adipisci totam neque tempore. Sequi, nemo sunt consectetur obcaecati rem.

Headline level five

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, aperiam, neque, minima vel nihil perspiciatis dolorum odio suscipit unde praesentium sequi maxime quod accusantium aliquam quis saepe culpa at. Asperiores!

Headline level six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, incidunt, consequatur, voluptates, dolores debitis vel reprehenderit iste molestiae sed doloribus officiis explicabo tempora sapiente nesciunt numquam quod dolore porro placeat!


Inline elements and code

(most from Clearleft style guide)

You might have noticed all the monospaced text in this guide. There are a number of inline HTML elements you may use anywhere within other elements, including abbr, cite, code, del, em, ins, strong, and var.

abbr
Used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it’s less work and useful (enough) to mark up only the first occurence of any particular abbreviation on a page, and ignore the rest. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation (although notably, this does not work in Internet Explorer for Windows). Example abbreviations and usage: NASA, HTML, and Mass.
cite
Used for defining a citation or reference to other information sources. Example cited text and usage: More information can be found in [ISO-0000]
del
Used for deleted or retracted text which still must remain on the page for some reason. Since the default style includes a strikethrough line, it’s preferable to the s element. The del element also has a datetime attribute which allows you to include a timestamp directly in the element. Example deleted text and usage: She bought two five pairs of shoes.
em
Used for denoting emphasized text. In most instances where you'd want to italicize text (using the HTML element i or otherwise) you should use the em element instead. Notable exceptions are stylistic italicizing of proper titles, foreign languages, etc. where italicizing is used for differentiation instead of emphasis. In those cases, no proper HTML elements exist, so an i element or a span element with a custom class may be preferable. Example emphasized text and usage: You simply must try the negitoro maki!
ins
Used for inserted text and counterpart to the del element. Like del, ins has a datetime attribute which allows you to include a timestamp directly in the element. Example inserted text and usage: She bought two five pairs of shoes.
kbd
Used for text which should be typed by the user. Mainly useful for computer instructions. Example keyboard text and usage: Please press Enter to continue.
q

Used for quoting inline. Example usage illustrating nested quotations:

John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry’s, on Gloucester Road.

strong
Used for denoting stronger emphasis than the em element. In most instances where you'd want to bold text (using the HTML element b or otherwise) you should use the strong element instead. Notable exceptions are stylistic bolding of examples, first occurences of names in an article, etc. where bolding is used for differentiation instead of emphasis. In those cases, no proper HTML elements exist, so b element or a span element with a custom class may be preferable. Example strong text and usage: Don't stick nails in the electrical outlet.
var
Used for variables within computer code snippets. Useful for technology-oriented sites, not so useful otherwise. Example code and usage: Add 5 to $result and recalculate.

Code

All chunk of code are rendered through Lea Verou's prism.js.


// Hello world in PHP
print("Hello World");
				

# Hello friends in python
def greet(name):
	print 'Hello', name
greet('Jack')
greet('Jill')
greet('Bob')
				

Inline usage: just like elsewhere in this document, HTML elements like em or code can be considered code, and marked up as such.


Quotes

Quotes goes into <blockquote> tag and quotation source goes into <cite> tag, but it can be an attribute as well.

Quotation is the repetition of someone else's statement or thoughts.


Lists

  • Liste non numerate (come questa, tag <ul>)
  • Liste numerate
    1. Prima apri il tag <ol>
    2. Poi per ogni elemento della lista un tag <li>
  • Infine le liste di definizione (Definition list, <dl>) sono delle liste di accoppiate di termine (definition term <dt>) e descrizione (definition description <dd>)
    Decarola - <dt>
    Bello e bravo - <dd>
    Sandro - <dt>
    Brutto e cattivo - <dd>

Tables

ITU band Band name Frequencies (MHz)
Lower end Upper end
VHF 6 meters 50 54
2 meters 144 148
1.25 meters 219 220
222 225

Buttons

Don't click Seriously
don't


Notification

There's an empty div .j-note at the beginning of the document, added by the jquery's ready function. To show it just add the class .isActive.
To add colors, use following additional classes:

  • .error for error messages with red background
  • .warning for warning messages with yellow background
  • .green for success messages with green background
  • .pink for glamour standard messages with pink background. Usefull for girls.

Warning Error Green Pink

Toggle .isActive class

There's also a javascript startNote function you can use wherever you need:


function startNote(type, message) {
    type = typeof type !== 'undefined' ? type : 'pink';
    message = typeof message !== 'undefined' ? message : 'Default pink message - mail it to alain@alain.it';
    $(noteBar).attr("class", "note j-note");
    $(noteBar).empty();
    $(noteBar).append(message).addClass(type).append("").addClass("isActive");
}

To remove the note, use the stopNote() function.


Layouts

Single column

Easier to read. Used for blog and any other reading page. Markup: <div class="singleCol"></div>.

Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed do eiusmod * tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, accusamus, in, ducimus voluptatum reiciendis fugit fugiat hic labore illum earum nesciunt molestias dolorem veritatis incidunt eius dolorum accusantium ipsum cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nesciunt libero at laborum repellendus explicabo tenetur dignissimos ex incidunt minus nam repellat sunt commodi eligendi quae aut obcaecati. Quibusdam, tempore!

Two columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Four columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Two third and one third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Three quarter and one quarter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.