This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") { | |
// … magic beans follows ... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Modal component | |
.modal { | |
.ui-lvl99-toggleable(@ns: ~“modal”); | |
.-toggleable-init-default(); | |
} | |
// ... would generate the following CSS | |
.modal.ui-modal-show { | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Uses the namespace to build custom state classes | |
@-toggleable-ns-class-show: ~".ui-@{ns}-show"; | |
@-toggleable-ns-class-hide: ~".ui-@{ns}-hide"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Class mixin which contain style definitions for `show` state | |
.-toggleable-class-show(@rules: {}) { | |
display: @-toggleable-display; | |
@rules(); | |
} | |
// Class mixin which contains style definitions for `hide` state | |
.-toggleable-class-hide(@rules: {}) { | |
display: none; | |
@rules(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Special mixin to apply any default state styles and rules | |
.-toggleable-init-default(@rules: {}) { | |
.-toggleable-state-show(); | |
.-toggleable-state-hide(); | |
@rules(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Modal Mixin Class | |
// @param @ns Namespaces the custom state classes | |
.ui-lvl99-modal(@ns: ~"lvl99-modal") { | |
.ui-lvl99-toggleable(@ns); | |
.-modal-init-default(@rules: {}) { | |
.-toggleable-init-default(@rules); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Modal Mixin Class | |
// @param @ns Namespaces the custom state classes | |
.ui-lvl99-modal(@ns: ~"lvl99-modal") { | |
.ui-lvl99-toggleable(@ns); | |
// Special mixin to apply any rules to the default class | |
// If you feel you wouldn’t need to reuse this class definition in other components, you could | |
// just define it in the main body of the mixin class definition | |
.-modal-class-default(@rules: {}) { | |
position: fixed; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal { | |
.ui-lvl99-modal(@ns: ‘modal’); | |
.-modal-init-default({ | |
background: red; | |
padding: 40px; | |
}); | |
} | |
// ... would output the following CSS | |
.modal { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Detect any specific server environment config setup to apply | |
// Default: development | |
$server_environment = 'development'; | |
if ( ! empty( $_SERVER['HTTP_SERVER_ENVIRONMENT'] ) ) { | |
$server_environment = $_SERVER['HTTP_SERVER_ENVIRONMENT']; | |
} | |
// Load the server environment config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Detect any specific server environment config setup to apply | |
// I use a custom variable where you can set like so in Apache VirtualHost or in .htaccess: | |
// `SetEnv HTTP_SERVER_ENVIRONMENT "staging" | |
// Default: development | |
$server_environment = 'development'; | |
if ( ! empty( $_SERVER['HTTP_SERVER_ENVIRONMENT'] ) ) { | |
$server_environment = $_SERVER['HTTP_SERVER_ENVIRONMENT']; | |
} |