primer / css
File Size

The distribution of size of files (measured in lines of code).

Intro
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
File Size Overall
  • There are 156 files with 7,783 lines of code.
    • 0 very long files (0 lines of code)
    • 0 long files (0 lines of code)
    • 8 medium size files (2,100 lines of codeclsfd_ftr_w_mp_ins)
    • 14 small files (1,885 lines of code)
    • 134 very small files (3,798 lines of code)
0% | 0% | 26% | 24% | 48%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
scss0% | 0% | 28% | 24% | 47%
js0% | 0% | 0% | 25% | 74%
cjs0% | 0% | 0% | 0% | 100%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
src0% | 0% | 28% | 24% | 47%
script0% | 0% | 0% | 25% | 74%
ROOT0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
action-list-item.scss
in src/actionlist
394 -
select-menu.scss
in src/select-menu
310 -
257 -
page-layout.scss
in src/layout
249 -
button.scss
in src/buttons
240 -
tooltips.scss
in src/tooltips
228 -
dropdown.scss
in src/dropdown
213 -
box.scss
in src/box
209 -
form-control.scss
in src/forms
182 -
popover.scss
in src/popover
177 -
form-group.scss
in src/forms
170 -
misc.scss
in src/buttons
165 -
animations.scss
in src/utilities
151 -
layout.scss
in src/support/variables
143 -
layout.scss
in src/layout
133 -
button.scss
in src/marketing/buttons
118 -
typography.scss
in src/marketing/type
116 -
typography.scss
in src/utilities
113 -
avatar-stack.scss
in src/avatars
106 -
flash.scss
in src/alerts
105 -
variables.scss
in src/marketing/support
104 -
102 1
pagination.scss
in src/pagination
100 -
toasts.scss
in src/toasts
98 -
menu.scss
in src/navigation
98 -
subnav.scss
in src/navigation
96 -
images.scss
in src/markdown
92 -
87 8
mixins.scss
in src/layout
83 -
dist.js
in script
82 11
timeline-item.scss
in src/timeline
79 -
sidenav.scss
in src/navigation
76 -
color-modes.scss
in src/support/mixins
75 -
suggester.scss
in src/autocomplete
74 -
button-group.scss
in src/buttons
71 -
underline-nav.scss
in src/navigation
71 -
69 -
tabnav.scss
in src/navigation
68 -
blankslate.scss
in src/blankslate
66 -
markdown-body.scss
in src/markdown
66 -
action-list-tree.scss
in src/actionlist
61 -
base.scss
in src/base
60 -
59 -
layout.scss
in src/utilities
58 -
code.scss
in src/markdown
57 -
labels.scss
in src/labels
55 -
visibility-display.scss
in src/utilities
54 -
borders.scss
in src/utilities
53 -
typography.scss
in src/support/mixins
53 -
headings.scss
in src/markdown
52 -
Files With Most Units (Top 5)
File# lines# units
dist.js
in script
82 11
87 8
43 1
10 1
102 1
Files With Long Lines (Top 6)

There are 6 files with lines longer than 120 characters. In total, there are 18 long lines.

File# lines# units# long lines
typography.scss
in src/marketing/type
116 - 10
pagination.scss
in src/pagination
100 - 2
form-select.scss
in src/forms
33 - 2
button.scss
in src/marketing/buttons
118 - 2
69 - 1
typography.scss
in src/support/variables
25 - 1