[Blueprint] Better initial starter templates for blueprint projects, depending on what approach they want to take: basic or semantic.
This commit is contained in:
parent
5a893ee8a6
commit
4fdb4e20cd
BIN
frameworks/blueprint/templates/basic/grid.png
Normal file
BIN
frameworks/blueprint/templates/basic/grid.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 206 B |
4
frameworks/blueprint/templates/basic/ie.sass
Normal file
4
frameworks/blueprint/templates/basic/ie.sass
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@import blueprint.sass
|
||||||
|
|
||||||
|
// Generate the blueprint IE-specific customizations:
|
||||||
|
+blueprint-ie
|
30
frameworks/blueprint/templates/basic/manifest.rb
Normal file
30
frameworks/blueprint/templates/basic/manifest.rb
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
description "The blueprint framework."
|
||||||
|
|
||||||
|
stylesheet 'screen.sass', :media => 'screen, projection'
|
||||||
|
stylesheet 'partials/_base.sass'
|
||||||
|
stylesheet 'print.sass', :media => 'print'
|
||||||
|
stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
|
||||||
|
|
||||||
|
image 'grid.png'
|
||||||
|
|
||||||
|
help %Q{
|
||||||
|
Please see the blueprint website for documentation on how blueprint works:
|
||||||
|
|
||||||
|
http://blueprintcss.org/
|
||||||
|
|
||||||
|
Docs on the compass port of blueprint can be found on the wiki:
|
||||||
|
|
||||||
|
http://wiki.github.com/chriseppstein/compass/blueprint-documentation
|
||||||
|
}
|
||||||
|
|
||||||
|
welcome_message %Q{
|
||||||
|
Please see the blueprint website for documentation on how blueprint works:
|
||||||
|
|
||||||
|
http://blueprintcss.org/
|
||||||
|
|
||||||
|
Docs on the compass port of blueprint can be found on the wiki:
|
||||||
|
|
||||||
|
http://wiki.github.com/chriseppstein/compass/blueprint-documentation
|
||||||
|
|
||||||
|
To get started, edit the screen.sass file and read the comments and code there.
|
||||||
|
}
|
10
frameworks/blueprint/templates/basic/partials/_base.sass
Normal file
10
frameworks/blueprint/templates/basic/partials/_base.sass
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// Here is where you can define your constants for your application and to configure the blueprint framework.
|
||||||
|
// Feel free to delete these if you want keep the defaults:
|
||||||
|
|
||||||
|
!blueprint_grid_columns = 24
|
||||||
|
!blueprint_grid_width = 30px
|
||||||
|
!blueprint_grid_margin = 10px
|
||||||
|
|
||||||
|
// If you change your grid column dimensions
|
||||||
|
// you can make a new grid background image from the command line like this:
|
||||||
|
// compass grid-img 30+10x16
|
4
frameworks/blueprint/templates/basic/print.sass
Normal file
4
frameworks/blueprint/templates/basic/print.sass
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@import blueprint.sass
|
||||||
|
|
||||||
|
// Generate the blueprint print styles:
|
||||||
|
+blueprint-print
|
11
frameworks/blueprint/templates/basic/screen.sass
Normal file
11
frameworks/blueprint/templates/basic/screen.sass
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// This import applies a global reset to any page that imports this stylesheet.
|
||||||
|
@import blueprint/reset.sass
|
||||||
|
// To configure blueprint, edit the partials/_base.sass file.
|
||||||
|
@import partials/base.sass
|
||||||
|
// Import all the default blueprint modules so that we can access their mixins.
|
||||||
|
@import blueprint
|
||||||
|
// Import the non-default scaffolding module.
|
||||||
|
@import blueprint/scaffolding.sass
|
||||||
|
|
||||||
|
// Generate the blueprint framework according to your configuration:
|
||||||
|
+blueprint
|
@ -23,7 +23,7 @@ form.bp
|
|||||||
+blueprint-form
|
+blueprint-form
|
||||||
|
|
||||||
// Page layout can be done using mixins applied to your semantic classes and IDs:
|
// Page layout can be done using mixins applied to your semantic classes and IDs:
|
||||||
body.three-col
|
body.two-col
|
||||||
#container
|
#container
|
||||||
+container
|
+container
|
||||||
#header, #footer
|
#header, #footer
|
||||||
|
BIN
frameworks/blueprint/templates/semantic/grid.png
Normal file
BIN
frameworks/blueprint/templates/semantic/grid.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 206 B |
16
frameworks/blueprint/templates/semantic/ie.sass
Normal file
16
frameworks/blueprint/templates/semantic/ie.sass
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
@import blueprint.sass
|
||||||
|
|
||||||
|
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||||
|
// +blueprint-ie
|
||||||
|
|
||||||
|
//Recommended Blueprint configuration with scoping and semantic layout:
|
||||||
|
body.bp
|
||||||
|
+blueprint-ie(true)
|
||||||
|
// Note: Blueprint centers text to fix IE6 container centering.
|
||||||
|
// This means all your texts will be centered under all version of IE by default.
|
||||||
|
// If your container does not have the .container class, don't forget to restore
|
||||||
|
// the correct behavior to your main container (but not the body tag!)
|
||||||
|
// Example:
|
||||||
|
// .my-container
|
||||||
|
// text-align: left
|
||||||
|
|
33
frameworks/blueprint/templates/semantic/manifest.rb
Normal file
33
frameworks/blueprint/templates/semantic/manifest.rb
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
description "The blueprint framework."
|
||||||
|
|
||||||
|
stylesheet 'screen.sass', :media => 'screen, projection'
|
||||||
|
stylesheet 'partials/_base.sass'
|
||||||
|
stylesheet 'partials/_form.sass'
|
||||||
|
stylesheet 'partials/_page.sass'
|
||||||
|
stylesheet 'partials/_two_col.sass'
|
||||||
|
stylesheet 'print.sass', :media => 'print'
|
||||||
|
stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
|
||||||
|
|
||||||
|
image 'grid.png'
|
||||||
|
|
||||||
|
help %Q{
|
||||||
|
Please see the blueprint website for documentation on how blueprint works:
|
||||||
|
|
||||||
|
http://blueprintcss.org/
|
||||||
|
|
||||||
|
Docs on the compass port of blueprint can be found on the wiki:
|
||||||
|
|
||||||
|
http://wiki.github.com/chriseppstein/compass/blueprint-documentation
|
||||||
|
}
|
||||||
|
|
||||||
|
welcome_message %Q{
|
||||||
|
Please see the blueprint website for documentation on how blueprint works:
|
||||||
|
|
||||||
|
http://blueprintcss.org/
|
||||||
|
|
||||||
|
Docs on the compass port of blueprint can be found on the wiki:
|
||||||
|
|
||||||
|
http://wiki.github.com/chriseppstein/compass/blueprint-documentation
|
||||||
|
|
||||||
|
To get started, edit the screen.sass file and read the comments and code there.
|
||||||
|
}
|
11
frameworks/blueprint/templates/semantic/partials/_base.sass
Normal file
11
frameworks/blueprint/templates/semantic/partials/_base.sass
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// Here is where you can define your constants for your application and to configure the blueprint framework.
|
||||||
|
// Feel free to delete these if you want keep the defaults:
|
||||||
|
|
||||||
|
!blueprint_grid_columns = 24
|
||||||
|
!blueprint_container_size = 950px
|
||||||
|
!blueprint_grid_margin = 10px
|
||||||
|
|
||||||
|
// Use this to calculate the width based on the total width.
|
||||||
|
// Or you can set !blueprint_grid_width to a fixed value and unset !blueprint_container_size -- it will be calculated for you.
|
||||||
|
!blueprint_grid_width = (!blueprint_container_size + !blueprint_grid_margin) / !blueprint_grid_columns - !blueprint_grid_margin
|
||||||
|
|
@ -0,0 +1,6 @@
|
|||||||
|
// Only apply the blueprint form styles to forms with
|
||||||
|
// a class of "bp". This makes it easier to style
|
||||||
|
// forms from scratch if you need to.
|
||||||
|
|
||||||
|
form.bp
|
||||||
|
+blueprint-form
|
18
frameworks/blueprint/templates/semantic/partials/_page.sass
Normal file
18
frameworks/blueprint/templates/semantic/partials/_page.sass
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
// Import the non-default scaffolding module to help us get started.
|
||||||
|
@import blueprint/scaffolding.sass
|
||||||
|
|
||||||
|
// This configuration will only apply the
|
||||||
|
// blueprint styles to pages with a body class of "bp"
|
||||||
|
// This makes it easier to have pages without blueprint styles
|
||||||
|
// when you're using a single/combined stylesheet.
|
||||||
|
|
||||||
|
body.bp
|
||||||
|
+blueprint-typography(true)
|
||||||
|
+blueprint-utilities
|
||||||
|
+blueprint-debug
|
||||||
|
+blueprint-interaction
|
||||||
|
|
||||||
|
// Remove the scaffolding when you're ready to start doing visual design.
|
||||||
|
// Or leave it in if you're happy with how blueprint looks out-of-the-box
|
||||||
|
+blueprint-scaffolding("body.bp")
|
||||||
|
|
@ -0,0 +1,38 @@
|
|||||||
|
// Page layout can be done using mixins applied to your semantic classes and IDs
|
||||||
|
// For instance this layout defines a two column layout on pages with
|
||||||
|
// a body class of "two-col".
|
||||||
|
//
|
||||||
|
// The markup would look like:
|
||||||
|
// <div id="container">
|
||||||
|
// <div id="header"></div>
|
||||||
|
// <div id="sidebar"></div>
|
||||||
|
// <div id="content"></div>
|
||||||
|
// <div id="footer"></div>
|
||||||
|
// </div>
|
||||||
|
//
|
||||||
|
// and the layout would look like:
|
||||||
|
// +------------------------+
|
||||||
|
// | #header |
|
||||||
|
// +--------+---------------+
|
||||||
|
// | | |
|
||||||
|
// |#sidebar| #content |
|
||||||
|
// | | |
|
||||||
|
// +------------------------+
|
||||||
|
// | #footer |
|
||||||
|
// +--------+---------------+
|
||||||
|
|
||||||
|
body.two-col
|
||||||
|
#container
|
||||||
|
+container
|
||||||
|
#header, #footer
|
||||||
|
+column(!blueprint_grid_columns)
|
||||||
|
#sidebar
|
||||||
|
// One third of the grid columns, rounding down. With 24 cols, this is 8.
|
||||||
|
!sidebar_columns = floor(!blueprint_grid_columns / 3)
|
||||||
|
+column(!sidebar_columns)
|
||||||
|
#content
|
||||||
|
// Two thirds of the grid columns, rounding up.
|
||||||
|
// With 24 cols, this is 16.
|
||||||
|
!content_columns = ceil(2 * !blueprint_grid_columns / 3)
|
||||||
|
// true means it's the last column in the row
|
||||||
|
+column(!content_columns, true)
|
8
frameworks/blueprint/templates/semantic/print.sass
Normal file
8
frameworks/blueprint/templates/semantic/print.sass
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
@import blueprint.sass
|
||||||
|
|
||||||
|
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
|
||||||
|
// +blueprint-print
|
||||||
|
|
||||||
|
//Recommended Blueprint configuration with scoping and semantic layout:
|
||||||
|
body.bp
|
||||||
|
+blueprint-print(true)
|
14
frameworks/blueprint/templates/semantic/screen.sass
Normal file
14
frameworks/blueprint/templates/semantic/screen.sass
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
// This import applies a global reset to any page that imports this stylesheet.
|
||||||
|
@import blueprint/reset.sass
|
||||||
|
|
||||||
|
// To configure blueprint, edit the partials/base.sass file.
|
||||||
|
@import partials/base.sass
|
||||||
|
|
||||||
|
// Import all the default blueprint modules so that we can access their mixins.
|
||||||
|
@import blueprint
|
||||||
|
|
||||||
|
// Combine the partials into a single screen stylesheet.
|
||||||
|
@import partials/page.sass
|
||||||
|
@import partials/form.sass
|
||||||
|
@import partials/two_col.sass
|
||||||
|
|
Loading…
Reference in New Issue
Block a user