More Related Content Similar to Team styles (20) Team styles4. Why a team?
ā¢ Big apps = multiple developers
ā¢ You should be building ready for a
handover
ā¢ Create a solid foundation and build off it
7. ā¢ Less ļ¬les
ā¢ Minimum amount of http requests
ā¢ Styles to target less sophisticated browsers
ā¢ Styles to target different media typesā
ā¢ Simplicity
9. ā¢ More ļ¬les
ā¢ Loads of stylesheets
ā¢ Broken up into sections
ā¢ Easy to navigate, isolate, extrapolate
ā¢ Sheets to target different browsers
ā¢ Sheets to target different media
11. ā¢ Like working their own way
ā¢ Often opinionated
ā¢ Not necessarily technical
ā¢ May require guidance
16. ā¢ Overview of technologies used
ā¢ Approach to issues like
ā¢ Browser targeting
ā¢ CSS3
ā¢ @media supported
ā¢ Outline creative brief
ā¢ Include original designs
21. // John
.button {
background: black;
color: white;
}
// Peter
html body .button {
background: grey;
color: creme;
}
23. (Although I prefer to have styles structured
as follows)
h1#logo {
Layout display: block;
(by importance) position: absolute;
margin: 15px 0 10px;
padding: 7px 4px;
Aesthetics
background: black;
(by impact)
font: bold 16px/21px Helvetica, Arial,
color: pink;
}
26. ā¢ Rails is easy to navigate, because of
structure
ā¢ Create a solid structure in your app
ā¢ Why reinvent the wheel?
28. Controllers Views
announcement announcement
s s
application documents
documents events
events layouts
parts parts
user_sessions user_sessions
29. Controllers Views Stylesheets
announcement announcement application
s s announcement
application documents s
documents events documents
events layouts events
parts parts layouts
user_sessions user_sessions parts
user_sessions
30. Controllers Views Stylesheets
announcement announcement application
s s announcement
application documents s
documents events documents
events layouts events
parts parts layouts
user_sessions user_sessions parts
user_sessions
32. stylesheets/
styles.css
partials/
_application.css
_announcements.css
_documents.css
...
35. @media
ā¢ all ā¢ handheld ā¢ screen
ā¢ braille ā¢ print ā¢ speech
ā¢ embossed ā¢ projection ā¢ tty
36. @media
@media (max-width: 600px)
{
...
}
@media (max-width: 400px) {
...
}
@media (min-width: 1300px) {
37. Naming Conventions
application.css
application.print.css
announcements.css
documents.css
events.css
layouts.css
layout.print.css
parts.css
user_sessions
38. Extrapolate to suit
application/reset.css
application/fonts.css
application.css
application.print.css
announcements.css
documents.css
events.css
layouts.css
layout.print.css
parts.css
user_sessions
40. 1 sheet for each IE version
1 sheet for every other browser
41. = stylesheet_link_tag 'screen', :media => 'screen'
= stylesheet_link_tag 'print', :media => 'print'
/[if lte IE9]
= stylesheet_link_tag 'ie9', :media => 'screen'
/[if lte IE8]
= stylesheet_link_tag 'ie8', :media => 'screen'
/[if lte IE7]
= stylesheet_link_tag 'ie7', :media => 'screen'
/[if lte IE6]
= stylesheet_link_tag 'ie6', :media => 'screen'
44. Use this: # application.css
li {
margin: 5px;
}
# ie.css
li {
margin: 0;
}
Over this: # application.css
li {
margin: 5px; !important
margin: 0;
}
49. ā¢ Use as a base
ā¢ Customise to suit project (cascaded)
50. screen.css application/reset.css
application/fonts.css
print.css application.css
application.print.css
ie9.css announcements.css
documents.css
ie8.css events.css
layouts.css
ie7.css layout.print.css
parts.css
ie6.css user_sessions
51. @import
screen.css application/reset.css
application/fonts.css
print.css application.css
application.print.css
ie9.css announcements.css
documents.css
ie8.css events.css
layouts.css
ie7.css layout.print.css
parts.css
ie6.css user_sessions
52. /* screen.css */
@import "partials/application.css";
@import "partials/announcements.css";
@import "partials/documents.css";
@import "partials/events.css";
...
55. Development
# when ActionController::Base.perform_caching is false =>
<link href="/stylesheets/application/reset.css" media="screen" rel="stylesheet" type="text/
css" />
<link href="/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/announcements.css" media="screen" rel="stylesheet" type="text/css" /
>
<link href="/stylesheets/documents.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/events.css" media="screen" rel="stylesheet" type="text/css" />
...
64. CSS
table.events {
margin: 14px 0 7px;
}
table.events td {
background: #ccc;
}
table.events td h4 {
margin-top: 6px;
font-size: 1.2em;
}
table.events td a {
color: #f00;
}
65. LESS CSS
@silver: #ccc;
@red: #f00;
table.events {
margin: 14px 0 7px;
td {
background: @silver;
h4 {
margin-top: 6px;
font-size: 1.2em;
}
a{
color: @red;
}
}
68. SASS vs SCSS/LESS
ā¢ SASS is a language ā¢ SCSS/LESS act like
extensions of CSS
ā¢ You canāt use CSS in ā¢ You can use CSS in SCSS/
SASS LESS
ā¢ SASS looks different to ā¢ SCSS/LESS looks like CSS
CSS extended
74. ā¢ Front-end developers can set colours to be
used throughout all styles
ā¢ Let guess-work when introducing colours
ā¢ DRYer
78. body {
max-width: $max_width;
}
article {
margin: $gutter;
width: $column * 6;
}
em.crazy_bargain {
color:$orange;
}
80. table.events { margin: 14px 0 7px;}
table.events td { background: #ccc;}
table.events td h4 { margin-top: 6px; font-size: 1.2em;}
table.events td a { color: #f00;}
becomes
table.events {
margin: 14px 0 7px;
td {
background: #ccc;
h4 { margin-top: 6px; font-size: 1.2em;}
a { color: #f00;}
}
}
85. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
ul li a { @include rounded(6px); }
88. // application.scss
...
@mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin rounded-top($radius: 10px) {
-moz-border-radius-topleft: $radius;
-moz-border-radius-topright: $radius;
-webkit-border-top-left-radius: $radius;
-webkit-border-top-right-radius: $radius;
}
@mixin gradient($from, $to) {
background: -moz-linear-gradient(50% 0, $from, $to);
background: -webkit-gradient(linear, 50% 0, 50% 100%, from($from), to($to));
}
94. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
ul li a { @include rounded(6px); }
96. 1 File
1 http request
Loads of images
97. @mixin sprites($x_offset: 0, $y_offset: 0) {
background-image: url(/images/sprites.png);
background-repeat: no-repeat;
background-position: -$x_offset -$y_offset;
}
@mixin icon_sprite($sequence) {
// icons start 350px down
@include sprites(($sequence * 30px) + 350px);
}
a.new {
display: inline-block;
padding-left: 25px;
@include icon_sprite(1);
99. .button {
background: black;
color: white;
&:hover {
background: white;
}
}
.funky_button {
@extend .button;
color: pink;
}
101. // a list of buttons
// ul
.buttons {
display: block;
margin: 0;
padding: 0;
list-style: none;
li {
display: block;
margin: 0;
padding: 0;
a{
display: block;
padding: 8px 15px;
}
106. $visible_light: #ccc;
#lights_are {
&.on {
background: lighten( $visible_light, 35% );
color: $visible_light;
}
&.off {
background: darken( $visible_light, 35% );
color: $visible_light;
}
}
113. #container {
Ā Ā Ā Ā @include container;
Ā Ā Ā Ā Ā
Ā Ā Ā Ā .form_row {
Ā Ā Ā Ā Ā Ā Ā Ā @include column(24);
Ā Ā Ā Ā Ā Ā Ā Ā Ā
Ā Ā Ā Ā Ā Ā Ā Ā .label {
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā @include column(3);
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā font-weight: bold;
Ā Ā Ā Ā Ā Ā Ā Ā Ā }
Ā Ā Ā Ā Ā Ā Ā Ā .child_block {
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā @include column(12);
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā .label {
Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā @include clearļ¬x;
}
123. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
// Already deļ¬ned so just a rename
@mixin round($radius: 10px) {
@include rounded($radius);
}
125. Create a base form stylesheet
Include all variations
Special use-cases can go into
section ļ¬le