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/">
-->
<!-- build:css styles/components/main.min.css -->
<link rel="stylesheet" href="styles/h5bp.css">
<!-- endbuild -->
<link rel="stylesheet" href="styles/basic.css">
</head>
<body>
<!-- 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/">
-->
<!-- 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 -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body>
<header class="app-bar promote-layer">
@ -53,7 +46,7 @@
<ul>
<li><a href="#hello">Hello</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>
</nav>
@ -62,7 +55,7 @@
<p>Welcome to Web Starter Kit.</p>
<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>
<!-- 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 itemprop="name" content="Visual Style Guide — Web Starter Kit">
<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>
<style>
.auto-gen-code-snippet {
@ -1041,7 +1042,7 @@
<div class="container-medium">
<div class="featured-spotlight__container g--pull-half">
<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 class="container-small">
@ -1074,7 +1075,7 @@
</div>
<div class="featured-list__img-wrapper g--half g--last">
<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>
@ -1088,7 +1089,7 @@
</div>
<div class="featured-list__img-wrapper g--half g--last">
<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>

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-family:"icons";
src:url("../../images/icons/icons.eot");
src:url("../../images/icons/icons.eot?#iefix") format("embedded-opentype"),
url("../../images/icons/icons.woff2") format("woff2"),
url("../../images/icons/icons.woff") format("woff"),
url("../../images/icons/icons.ttf") format("truetype"),
url("../../images/icons/icons.svg?#icons") format("svg");
src:url("../images/icons/icons.eot");
src:url("../images/icons/icons.eot?#iefix") format("embedded-opentype"),
url("../images/icons/icons.woff2") format("woff2"),
url("../images/icons/icons.woff") format("woff"),
url("../images/icons/icons.ttf") format("truetype"),
url("../images/icons/icons.svg?#icons") format("svg");
font-weight: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.
*
*/
@import "_h5bp";
/*
* Visual Style Guide styles
* Remove if you prefer to use a CSS library, like Bootstrap
*/
@import "components/components";
html,
body {
@ -161,7 +167,7 @@ body.open {
.navdrawer-container h4,
.navdrawer-container ul li a {
height: auto;
height: 60px;
padding: 17px 20px;
line-height: 1.4;
}

17
gulpfile.js
View File

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