10 | *
11 | * Demo: jsfiddle.net/inuitcss/E26Yd
12 | *
13 | */
14 | %text-cols{
15 | @include vendor(column-gap, $base-spacing-unit);
16 | }
17 | .text-cols--2 { @extend %text-cols; @include vendor(column-count, 2); }
18 | .text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); }
19 | .text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); }
20 | .text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); }
21 |
22 | }//endif
23 |
--------------------------------------------------------------------------------
/src/ClientDependency.Web.Test/Css/Inuit/inuit.css/objects/_flexbox.scss:
--------------------------------------------------------------------------------
1 | @if $use-flexbox == true{
2 |
3 | /*------------------------------------*\
4 | $FLEXBOX
5 | \*------------------------------------*/
6 | /**
7 | * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
8 | * it, in a way... e.g.:
9 | *
10 |
13 | Welcome to
14 |
15 |
16 |
17 |
19 |
20 | 
18 |
One third grid
13 |Two thirds grid
17 |One half grid
21 |One quarter grid
25 |One quarter grid
29 |This here is a pill!
10 | * 11 |This here is also a lozenge!
12 | * 13 | * Pills have fully rounded ends, lozenges have only their corners rounded. 14 | * 15 | * Demo: jsfiddle.net/inuitcss/N3pGm 16 | * 17 | */ 18 | .pill{ 19 | display:inline-block; 20 | /** 21 | * These numbers set in ems mean that, at its narrowest, a lozenge will be 22 | * the same width as the `line-height` set on the `html` element. 23 | * This allows us to use the `.loz` in almost any `font-size` we wish. 24 | */ 25 | min-width: ($line-height-ratio * 0.666667) * 1em; 26 | padding-right:($line-height-ratio * 0.166667) * 1em; 27 | padding-left: ($line-height-ratio * 0.166667) * 1em; 28 | /* =1.50em */ 29 | text-align:center; 30 | background-color:$base-ui-color; 31 | color:#fff; /* Override this color in your theme stylesheet */ 32 | 33 | /** 34 | * Normally we’d use border-radius:100%; but instead here we just use an 35 | * overly large number; `border-radius:100%;` would create an oval on 36 | * non-square elements whereas we just want to round the ends of an element. 37 | */ 38 | border-radius:100px; 39 | } 40 | 41 | .loz{ 42 | @extend .pill; 43 | border-radius:$brand-round; 44 | } 45 | 46 | }//endif 47 | -------------------------------------------------------------------------------- /src/ClientDependency.Web.Test/Css/Inuit/inuit.css/objects/_marginalia.scss: -------------------------------------------------------------------------------- 1 | @if $use-marginalia == true{ 2 | 3 | /*------------------------------------*\ 4 | $MARGINALIA 5 | \*------------------------------------*/ 6 | /** 7 | * Marginalia are, per definition, notes in the margin of a document. The 8 | * `marginalia__body` class can be applied to all kinds of content, like text or 9 | * images, and is joined by a width class: 10 | * 11 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, 14 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
15 |11 | Nothing fancy here, just rendering the script and style blocks using the default provider. 12 | This library ships with the LoaderControlProvider set to the default 13 | provider which will render the script/style blocks where the ClientDependencyLoader is placed in page/control markup.
14 |15 | This paragraph is styled using a relative css path 16 |
17 |14 | On this page, we've got the jquery libraries grouped so that they are shared across pages, other dependencies are loaded normally.
15 | 16 |11 | This font is big because an embedded style resource has been added to the ClientDependency output 12 |
13 |13 | Here were rendering out a stylesheet that has a media="print" attribute and a JS file that has a type="text/html" attribute (for things like jquery templates)
14 |17 | On this page multiple includes of type CSS and JS are being loaded using the HtmlInclude control 18 | which parses regular HTML include tags to find dependencies.
19 |20 | This paragraph is styled using a relative css path 21 |
22 |9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lorem viverra magna molestie vestibulum ac non risus. Sed sed leo quam, eu eleifend neque. Curabitur ultricies metus a lectus aliquam tempus. Integer in metus a nibh tincidunt fermentum. In nec purus vitae nunc rhoncus eleifend. Etiam placerat consectetur enim ac pharetra. Etiam et nisi orci, lobortis eleifend erat. Praesent ac metus metus, id luctus neque. Mauris dictum ultricies nisi vel sodales. Nunc vestibulum quam vel eros egestas dapibus. Ut aliquet turpis metus. Curabitur libero ligula, ullamcorper in volutpat non, gravida ac erat. Praesent sed nibh at tortor mattis commodo vitae vitae tortor.
10 |9 | This example actually changes the current request's ClientDependencyLoader's default provider at runtime to the LazyLoadProvider
10 |
11 | //Changes the provider to be used at runtime in the code behind
12 | ClientDependencyLoader.Instance.ProviderName = LazyLoadProvider.DefaultName;
14 | //dynamically register the dependency in the code behind
15 | ClientDependencyLoader.Instance.RegisterDependency("Content.css", "Styles", ClientDependencyType.Css);
15 | On this page, we've got the jquery library loaded from our local server with a priority of "1", but we've got the jquery UI registered with a file 16 | path from the Google CDN with a priority of "3". 17 |
18 |19 | In the source of this page, ClientDependency has split the registrations for JavaScript so that everthing found before the jQuery UI lib is compressed, combined, etc.. 20 | then the jQuery UI lib is registered for downloading from the CDN, then everything after is again compressed, combined, etc... 21 |
22 |We've defined a pre-defined css bundle in the global.asax called CssBundle and we have put a dependency on that bundle in this view
21 |20 | # CoffeeScript 21 | square = (x) -> x * x 22 | cube = (x) -> square(x) * x 23 | alert(square 2 * cube 2); 24 |25 |
23 | Nothing fancy here, just rendering the script and style blocks using the default renderer. 24 | This library ships with the StandardRenderer set to the default renderer. 25 | The default renderer will render out standard script/style html blocks wherever you specify using 26 | the HtmlHelper: 27 |
28 |29 | <%= Html.RenderCssHere(new BasicPath(""Styles"", ""/Css"")) %> 30 |
31 |32 | To make a page/view/etc... dependent on a script or file just use this HtmlHelper methods: 33 |
34 |
35 | <% Html.RequiresCss(""Site.css"", ""Styles""); %>
36 | <% Html.RequiresJs(""/Js/jquery-1.3.2.min.js""); %>
37 |
22 | In the MVC Action for this page, we've dynamically added a path registration and have dynamically added a 2nd one in the view. 23 |
24 |
25 | There are a few extension methods to acheive this, the direct way is to get an instance of the DependencyRenderer by calling the extension method
26 | GetLoader() on either the ControllerContext, ViewContext or HttpContextBase, then you can just use the AddPath methods.
27 |
28 | Otherwise, if you are working in a view, you can use the HtmlHelper methods: RegisterPathAlias
29 |
On this page all JS will be rendered normally except for one which we've forced to use the lazy load provider
27 |28 | 29 |
30 |24 | On this page, we've got the jquery libraries grouped so that they are shared across pages, other dependencies are loaded normally. 25 |
26 | 27 |22 | On this page we have 2 dependencies registered with custom html attributes: 23 |
24 |The Imports.css file is used here which also imports the Content.css and the OverrideStyles.css
20 |20 | On this page, we've got the jquery library loaded from our local server with a priority of '1', but we've got the jquery UI registered with a file path from the Google CDN with a priority of '3' 21 |
22 |23 | In the source of this page, ClientDependency has split the registrations for JavaScript so that everthing found before the jQuery UI lib is compressed, combined, etc.. then the jQuery UI lib is registered for downloading from the CDN, then everything after is again compressed, combined, etc... 24 |
25 |
20 | function greeter(person: string) {
21 | return "Hello, " += person;
22 | }
23 | var user = "Jane User";
24 | alert(user);
25 |
26 |