google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #379 from google/styles-rework 

Restructure our Styles.
master
Addy Osmani 2014-08-21 19:25:32 +01:00
parent dab7b4a95f 91f1a7c0e1
commit 6f2e009184
9 changed files with 32 additions and 3536 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/basic.html
View File

@ -26,9 +26,7 @@
<link rel="canonical" href="http://www.example.com/"> <link rel="canonical" href="http://www.example.com/">
--> -->
<!-- build:css styles/components/main.min.css --> <link rel="stylesheet" href="styles/basic.css">
<link rel="stylesheet" href="styles/h5bp.css">
<!-- endbuild -->
</head> </head>
<body> <body>
<!-- Add your site or app content here --> <!-- Add your site or app content here -->

11
app/index.html
View File

@ -26,15 +26,8 @@
<link rel="canonical" href="http://www.example.com/"> <link rel="canonical" href="http://www.example.com/">
--> -->
<!-- build:css styles/components/main.min.css -->
<!-- HTML5 Boilerplate base styles -->
<link rel="stylesheet" href="styles/h5bp.css">
<!-- Visual Style Guide styles -->
<!-- Remove if you prefer to use a CSS library, like Bootstrap -->
<link rel="stylesheet" href="styles/components/components.css">
<!-- Page styles --> <!-- Page styles -->
<link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head> </head>
<body> <body>
<header class="app-bar promote-layer"> <header class="app-bar promote-layer">
@ -53,7 +46,7 @@
<ul> <ul>
<li><a href="#hello">Hello</a></li> <li><a href="#hello">Hello</a></li>
<li><a href="#get-started">Get Started</a></li> <li><a href="#get-started">Get Started</a></li>
<li><a href="styleguide/index.html">Style Guide</a></li> <li><a href="styleguide.html">Style Guide</a></li>
</ul> </ul>
</nav> </nav>
@ -62,7 +55,7 @@
<p>Welcome to Web Starter Kit.</p> <p>Welcome to Web Starter Kit.</p>
<h2 id="get-started">Get Started.</h2> <h2 id="get-started">Get Started.</h2>
<p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide/index.html">Style Guide</a>.</p> <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide.html">Style Guide</a>.</p>
</main> </main>
<!-- build:js scripts/main.min.js --> <!-- build:js scripts/main.min.js -->

11
app/styleguide/index.html → app/styleguide.html
View File

@ -7,8 +7,9 @@
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta itemprop="name" content="Visual Style Guide — Web Starter Kit"> <meta itemprop="name" content="Visual Style Guide — Web Starter Kit">
<meta itemprop="description" content="Visual style guide used by this site."> <meta itemprop="description" content="Visual style guide used by this site.">
<link rel="stylesheet" href="../styles/components/components.css">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700'> <link rel="stylesheet" href="styles/components.css">
<title>Visual Style Guide — Web Starter Kit</title> <title>Visual Style Guide — Web Starter Kit</title>
<style> <style>
.auto-gen-code-snippet { .auto-gen-code-snippet {
@ -1041,7 +1042,7 @@
<div class="container-medium"> <div class="container-medium">
<div class="featured-spotlight__container g--pull-half"> <div class="featured-spotlight__container g--pull-half">
<div class="featured-spotlight__img"> <div class="featured-spotlight__img">
<img src="../images/icons/placeholder--wide.png" alt="wide image placeholder example"> <img src="images/icons/placeholder--wide.png" alt="wide image placeholder example">
</div> </div>
<div class="container-small"> <div class="container-small">
@ -1074,7 +1075,7 @@
</div> </div>
<div class="featured-list__img-wrapper g--half g--last"> <div class="featured-list__img-wrapper g--half g--last">
<div class="featured-list__img"> <div class="featured-list__img">
<img src="../images/icons/placeholder--small.png" alt="small image placeholder example"> <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
</div> </div>
</div> </div>
</div> </div>
@ -1088,7 +1089,7 @@
</div> </div>
<div class="featured-list__img-wrapper g--half g--last"> <div class="featured-list__img-wrapper g--half g--last">
<div class="featured-list__img"> <div class="featured-list__img">
<img src="../images/icons/placeholder--small.png" alt="small image placeholder example"> <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
</div> </div>
</div> </div>
</div> </div>

0
app/styles/h5bp.css → app/styles/_h5bp.scss
View File

1
app/styles/basic.scss Normal file
View File

@ -0,0 +1 @@
@import "_h5bp";

12
app/styles/components/_components/_icons.scss
View File

@ -1,11 +1,11 @@
@font-face { @font-face {
font-family:"icons"; font-family:"icons";
src:url("../../images/icons/icons.eot"); src:url("../images/icons/icons.eot");
src:url("../../images/icons/icons.eot?#iefix") format("embedded-opentype"), src:url("../images/icons/icons.eot?#iefix") format("embedded-opentype"),
url("../../images/icons/icons.woff2") format("woff2"), url("../images/icons/icons.woff2") format("woff2"),
url("../../images/icons/icons.woff") format("woff"), url("../images/icons/icons.woff") format("woff"),
url("../../images/icons/icons.ttf") format("truetype"), url("../images/icons/icons.ttf") format("truetype"),
url("../../images/icons/icons.svg?#icons") format("svg"); url("../images/icons/icons.svg?#icons") format("svg");
font-weight:normal; font-weight:normal;
font-style:normal; font-style:normal;
} }

3504
app/styles/components/components.css
View File

File diff suppressed because it is too large Load Diff

8
app/styles/main.css → app/styles/main.scss
View File

@ -5,7 +5,13 @@
* Web Starter Kit team. * Web Starter Kit team.
* *
*/ */
@import "_h5bp";
/*
* Visual Style Guide styles
* Remove if you prefer to use a CSS library, like Bootstrap
*/
@import "components/components";
html, html,
body { body {
@ -161,7 +167,7 @@ body.open {
.navdrawer-container h4, .navdrawer-container h4,
.navdrawer-container ul li a { .navdrawer-container ul li a {
height: auto; height: 60px;
padding: 17px 20px; padding: 17px 20px;
line-height: 1.4; line-height: 1.4;
} }

17
gulpfile.js
View File

@ -87,15 +87,16 @@ gulp.task('styles', function () {
'app/styles/**/*.css', 'app/styles/**/*.css',
'app/styles/components/components.scss' 'app/styles/components/components.scss'
]) ])
.pipe($.changed('.tmp/styles', {extension: '.css'})) .pipe($.changed('styles', {extension: '.scss'}))
.pipe($.if('*.scss', $.rubySass({ .pipe($.rubySass({
style: 'expanded', style: 'expanded',
precision: 10 precision: 10
}) })
.on('error', console.error.bind(console)) .on('error', console.error.bind(console))
)) )
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/styles')) .pipe(gulp.dest('.tmp/styles'))
.pipe(gulp.dest('dist/styles'))
.pipe($.size({title: 'styles'})); .pipe($.size({title: 'styles'}));
}); });
@ -113,7 +114,7 @@ gulp.task('html', function () {
.pipe($.if('*.css', $.uncss({ .pipe($.if('*.css', $.uncss({
html: [ html: [
'app/index.html', 'app/index.html',
'app/styleguide/index.html' 'app/styleguide.html'
], ],
// CSS Selectors for UnCSS to ignore // CSS Selectors for UnCSS to ignore
ignore: [ ignore: [