Introduction
About this Style Guide
This is a simple style guide to get a project started. It contains some basic styles for Typography in general, buttons, and a few components. IĀ usually don't overdo more than that since every project is unique. But a good approach in general is:
- For things that require variations and will be reused across multiple sections / pages, create some global classes (like spacing, font sizes, opacity, etc;
- If you reuse sections with columns on multiple sections, consider creating some global classes for grids in general.
- CSS Grid is well supported now, and a lot easier / cleaner to use compare to the old way of building columns. Flexbox is also good.
About CSS units
All sizes (font size, spacing, etc)Ā on this template are based on a 8px grid system. You can find some references about this system here and here. IĀ prefer to use px to set up the base unit and EMs to define the sizes and scale.
Basically it works like this:
- Define the base font-size on the Body element (16px)
- Font sizes, padding, spacing, etc, defined in EMs
Why EMs and not REMs?
REM is awesome and is your friend. But IĀ prefer to use EMs as a size unit because it allows you to set the scale of your components individually, since it's relative to the parent element, not the root element.
Consider this scenario:Ā you have a box component, which all elements are sized using EMs. On mobile, the component feels too small. How do you fix that?
- With REMs, you would need to change the scale of all the elements inside that box individually.
- With EMs, all you have to do is change the font-size of the box element that holds all the content. You can change the size using PX or EMs, it doesn't matter. On place to change the scale is more maintainable.
Typography
Heading 1
Heading 2
Heading 3
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Components
Sync with Google Calendar
Automatically sync between Calendoscope and your Google Calendar account. Yes, itās that easy.
Sync with Microsoft Outlook
Automatically sync between Calendoscope and your Office 365 / Outlook account.
"I love your system. Thank you for making it painless, pleasant and most of all hassle free! Thanks for the great service. Really good."
"I love your system. Thank you for making it painless, pleasant and most of all hassle free! Thanks for the great service. Really good."