The template stylesheets and fonts are organized in 3 folders:
- The base stylesheets, in css/
- The extra styles, which should be loaded only when required, in css/styles/
- The font-icon Entypo, in css/Entypo
Base stylesheets
- reset.css
- The usual reset file
- style.css
- The main stylesheet (see below for more details)
- 480.css
- Styles for mobile - landscape
- 768.css
- Styles for tablet - portrait
- 992.css
- Styles for tablet - landscape
- 1200.css
- Styles for wide screens
- print.css
- Basic print styles
- login.css
- Styles for the login page
- error.css
- Styles for the error pages
style.css
This is the main stylesheet, always required.
Note that some of the styles it defines are overridden by upper mediaqueries - tagged as below:
- Smartphone - landscape
- 480
- Tablet - portrait
- 768
- Tablet - landscape
- 992
- Wide screens
- 1200
- Typography
- The various headers 768
- Utility classes
- Classes to control text style, alignement, float, paddings and margins, positioning, box styles...
- Generic shadows
- Generic CSS3 shadow classes to compose your own elements
- Generic bevel/emboss/gloss
- Generic CSS3 volume classes to compose your own elements
- Generic effects
- Generic CSS3 effects: border, glow, stripes...
- Columns
- Fluid CSS grid 480 768 1200 and fixed columns 768
- List & tags
- Basic lists 768 (block lists are defined in styles/lists.css) and tags
- List extras
- Additional elements for lists
- Block arrows
- An arrow style that may be used everywhere
- Generic elements
- Count and close bubbles, blocks, accordions, ribbon, meter and info spot
- Icons
- Font-icons classes
- Main layout elements
- Main template blocks: title bar 768 992, shortcuts 480 768, menu 768 992, main content 768 992...
- Menus styles
- Styles for the navigation menu
- Custom scrollbars
- The styles are used by the custom scroll plugin
- Buttons
- Generic buttons styles, with groups and button-icons
- Loaders
- Simple ajax loaders styles
- Messages
- Simple and big messages styles
- Tabs
- Styles to define tabs 768, used by the tabs plugin
- Notifications
- Styles 768 required by the notification plugin
- Tooltips
- Styles required by the tooltip plugin and the slider/progress plugin
- Extra stuff
- Utility classes (such as clearfix) and vendor-specific styles
Extra styles
- agenda.css
- Agenda and calendars
- dashboard.css
- Used for the dashboard page
- form.css
- Forms elements and layouts
- lists.css
- Various block lists
- modal.css
- Styles required by the modal plugin
- progress-slider.css
- Styles required by the progress and slider plugin
- switches.css
- iOS-like switches
- table.css
- Various tables styles