CARVIEW |
Select Language
HTTP/2 200
date: Thu, 24 Jul 2025 13:19:00 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
x-robots-tag: none
etag: W/"1763fbda2a9f4df2c2bf0ebf0df9e60f"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=kysuwv3vdWOiIcjiVvdKOvk7Rb2knte05ESoT8tl92H1RPftVI30X%2BIJFqgsmHavcb5XJeZVEX409yTu%2BMP2PHLN4CgUHOQLof0snr8jbhW%2BuDiBaLDo0CW0Q%2BvVtI%2F7Jts5KWyWpW4r45lfugXauGWrRR6snxUz0kdeclZirs9QZ3%2FhryrW4a96RkruoPFqAiX4yOBywfWpKE1y1tgSgUT5cRvANWxMCVIkNhAapHXWvV3%2B3V9hW5vLzq0IMBqHNcTbry6ExKJeMHhjsfElqw%3D%3D--jXlZCOiEtFPEStkb--NzdYvXR5NXhXFR8Q1xhBIg%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.79026530.1753363139; Path=/; Domain=github.com; Expires=Fri, 24 Jul 2026 13:18:59 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Fri, 24 Jul 2026 13:18:59 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: D780:29E0DE:6EFE:7DC9:688232C3
Application Module Structure · cssobj/cssobj Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 13
Application Module Structure
James Yang edited this page Dec 22, 2016
·
2 revisions
When working with cssobj, there's some best practice of module structure, like below module structure:
base_style_module -> style_factory_module -> application_module
For example, you have an photo application, that user can choose layout of their photoes.
code of base_style_module
// FILE: base-style.js
// option (opt): per rule based
// state: per stylesheet (result) based
// state can be mobile, or pc
export const float = opt => ({
.img { width: opt.width + 'px', float:'left', padding: v => v.result.state.platform == 'mobile' ? '0px' : '30px' }
})
export const flex = opt => ({
.img { width: opt.width + 'px', flex: 1}
})
code of style_factory_module
// FILE: style-factory.js
import cssobj from 'cssobj'
import { getState } from './state-manager'
import * as css from './base-style'
// create empty <style> container
export const pageStyle = cssobj({}, {local:true}, getState() )
// can change from float layout into flex layout
// return cssobj result
export function changeLayout (type, opt, state) {
return pageStyle.update( css[type](opt), state )
}
code of application_module
import {changeLayout} from './style-factory'
element.onclick = e => {
changeLayout('flex', {width: 100}, {platform: 'pc'})
}
Above, just a basic template, more work should be done in real world
Some other pattern, contribution is welcome
Clone this wiki locally
You can’t perform that action at this time.